Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So, now it's time to install the new version of Bootstrap. If you're following along with my previous movie, you'll know that this is the Bootstrap 3.0 version of my website, and that I'm managing everything with Git. So, the first thing I need to do is switch to the right branch. So, I'm going to do a Git checkout, and check out my Bootstrap 2 branch and switch back over here and refresh. And this is the Bootstrap 2 version of the website. So the next thing we need to do is actually create a new branch. So, this is the way that I manage my projects and it's definitely something you may want to look into. I'm using a virtual control system called Git, and if you want to learn how to use that, we've got a great course called Git Essential Training with Kevin Skoglund, be sure you check that out.
So, what I want to do here is actually go through and create a separate branch and I'm going to call this branch bt2migration. So what I want to do now is check out this version of the website, so that any changes that I made will be made under this new branch. And I'll leave my Bootstrap 2 branch alone just in case I want to revert back to the original version of that branch. So I'll do git checkout, and then do bt2migration, and that should check me out to the new branch. If I do git branch, I can see all the branches of my project and I've got a bootstrap2 branch, a bootstrap3, and a bt2migration branch which is where I'm on.
Next thing I will do is, go to the Bootstrap website and click on this Download Bootstrap link. Now, you can install Bootstrap in a number of different ways. If you go to Getting started, it's going to show all the different ways you can download Bootstrap maybe using the original less files or using CDNs now with the new version of Bootstrap, but the easiest way to download is just to go to the top of the site and then click on Download Bootstrap. Now, what that will do is it'll give you a folder with three different folders inside it. Now, this is a little bit different than before. It's going to give you a css folder, a js folder, as well as a fonts folder.
Before, we used to have an img folder. So what I need to do is copy the fonts folder to the same place that my css and js folder are. Now, before, we used to have this img. You can get rid of it if you want to. I'm going to leave it there. It's not really hurting anything. For production, I might go ahead and delete it before I publish everything. So I'm going to grab this fonts folder and put it right here. Then I'm going to open up the js and css files. I usually use the minified versions of these files, so I'll delete the regular versions and rename these bootstrap.css and bootstrap.js.
And, at this point, you're probably thinking either, Dear Lord, what have I done? My website is all screwed up. My columns are gone. Everything is gone. Or the other reaction you may have is, well, since I watched the rest of the movies in this course, I knew that some of this was coming. So this isn't that bad. It, the site looks pretty good, carousel looks a little different, the arrows don't quite look well, but they actually work. Like, if you click on these, you can see that the carousel itself is still working just fine. Let's check on the motiles, I'll click on one of these. sort of working, so we definitely have some work to do there.
So we've got a good starting point, what we need to do now is focus on individual updates that we have to perform to the HTML to make this transition properly to the new version of Bootstrap.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.