Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So we obviously need to do something about this navbar. It doesn't look very good. Our brand is sort of over to the right-hand side, and obviously the colors aren't looking correct. Now take a look at the code for the code on the Bootstrap website in version 2.3, which is what this is, and compare it with version three. So you can see here that the first div is a class of Navbar. Which, on the 3.0 version, is exactly the same way. If we go back to 2.3, and we look at the next div, it has a class of navbar inner.
In version three, that is no longer necessary. So it's not even there. So we need to watch for that. Next is the brand itself. And anchor tag in 2.3 had a class of brand. This anchor tag has a class of navbar brand. So these kind of changes can drive you a little crazy in the new version of Bootstrap. They seem to sort of reclassify a lot of things, and you need to watch out for those. So, let's see, the unordered list has a class of nav and Navbar-nav. And in the old version, it was just called nav.
So we also need to watch out for that one. Let's go into our code, and look at the components, and then php, and look for our header. There it is. We need to fix some of these. Now, one thing I said is that you no longer need this Navbar inner div right here. So I'll take that out, and of course, I need to take off. The closing diff, so that's gone. We'll change the class for the brand. Right now, it's called brand, and it needs to be called navbar-brand. And the unordered list needs to have a class of nav like it used to before, but then we also need to add Navbar-nav. So if we save that, and we go over to our site, we'll refresh, and everything's looking pretty good.
I can see that there are some CSS problems that I need to deal with. I don't know if this is because this is an early version of Bootstrap, but for some reason, this right here is not short in my version. This is normally not this long on the Bootstrap website, so it's going on two lines, and it doesn't look very good. For that, really, we need to get into some CSS. Let me just pull up the delevoper tools. I'm using Chrome, so I'm going to right-click and choose Inspect Element. And I actually want to inspect element right here, on the brand and see what's happening.
If we scroll down on the right-hand side, eventually we'll get to something that has this element as having a max width of 200 pixels. So if we take that out, you'll see that it's now the proper width. And if you want to do that on your website, it means that we're going to have to add a class. So to overwrite that, you just go into your CSS somewhere. I'm just going to put it here in the Style section, and change the maxed width here to none. That'll take care of that problem. Then obviously, we need to modify the padding that it's adding at the top and bottom.
So I'll just do that here to show you you can do this in your CSS file, padding bottom, and I'll just set it to zero. I don't really need padding at the bottom, and then padding top, and we'll set that to four pixels. See how that looks. That looks good, and it looks pretty good and that fixes most of my problems. Now there's going to be lots of other little things that you're going to have to fix. You probably noticed that I have customized my CSS quite a bit. You may want to get rid of these rounded edges, that one's going to be actually in this class of Navbar. And then we can just say, border radius, take out border radius here. And set to zero, that makes it nice and square.
Obviously, this is going to be different on your website, really every website is going to be different. There's some other CSS style. Changes that you're going to have to make, like you can tell the fonts aren't quite right, you probably need to create a style that makes all these fonts. Kind of like what they used to be, custom fonts. So you're still going to have to go in and modify lots of other things but hopefully, I've been able to catch most of the big problems that you're going to have when you migrate your old website into version 3.0 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.