Navigation is essential to any website and Bootstrap 4 makes creating navigation a bit easier. The classes are easier to learn and override. Let's take a look at how we can add navigation to our example. The new navigation is really easy to learn. It's a welcome change from the overcomplicated old navigation.
- View Offline
- [Voiceover] navigation is essential to any website. Bootstrap 4 makes creating navigation a lot easier. The classes are easier to learn as well as override. Let's take a look at how we can add navigation to our example. What I have right now is just a simple website with a series of links at the top. If you look at the code for this, you'll see that we have a header section with a nav as well as an un-ordered list inside that, and then a series of list items with links.
This is traditionally how I code my navigation. You may use divs instead of lists. But, this is pretty common for me. To create navigation in the new version of Bootstrap, we need to start with some sort of container. I tend to use a navigation container. This nav right here. We add a nav-bar class to that. In addition, you can have another container. Usually, I use a UL for this. In that container, you add a nav as well as a navbar-nav.
This is pretty similar to what you did in Bootstrap 3. Then, you have a series of containers. Again, I use normally list-items, and you add a nav-item to each one of those. Overall, Bootstrap 3 is a little more wordy. You have to add classes to just about every piece of content. But it ends up working well in the end. I think it's a little better to add classes to things, because it means that instead of always using the same tags, like UL and LI, we can use whichever tags we want and be a little more semantic about our markup in that way.
In addition to this list item with the nav-item, you would also have a container. Again, usually I use anchor tags. Those would get a nav-link. Let's take a look at how we would do that for this example right here. I'm going to go into my code, and into the nav-tag. I'm going to add a class of nav-bar. Then, on the un-ordered list, I'm going to add a class of nav & navbar-nav.
That's because there's actually different types of navs in Bootstrap. This is really what you did with Bootstrap 3 as well. The navigation system was always nav & navbar-nav. But then now, in addition to that, then we want to add a series of classes to each of the list items. So, I'm going to say class is going to be nav-item to each one of these. Then, on the links, I also need to add a class of nav-link. You'll notice that it's common to see these prefixes like nav on every one of the elements inside this nav right here.
That's sort of the basic steps that we need for the simplest type of nav. Let me go ahead and save this. Then, I'll switch over to my example. You can see that now we have a piece of navigation. It doesn't look that great yet. But it's the core of what you have to do in order to get this working. Although this works okay, we really need a few styles to make our navigation look good. We're going to need two sets. One that will determine the color of our text.
Another one that will determine the color of our background. For the text styles, we can choose either a navbar-light. Or, navbar-dark. This isn't the color of the text, per se. Instead, it's what we think the text will be set against. So, nav-bar light assumes that our navigation background is going to be light and therefore the text will be dark. Navbar-dark assumes that we're picking a dark background. So, the text will be set in a light color. Next, we can add a number of built-in color classes.
If you're familiar with Bootstrap, you'll recognize names like, primary, inverse, warning, etc. I'll show them all to you in just a few seconds. We can also add our own custom color. I'll also show you how to do that as well. Here's a list of available built-in background colors. Most of these should be familiar to you if you've used Bootstrap before. Let's go ahead and fix the look and feel of our navigation. One thing that I don't like is that the navigation is not following the container.
Normally, I like this text to be aligned right here. So, I'm going to add a container in order to accomplish that. Let's go into our code and right here, I'm going to add just a div with the class of container, and then I'm going to move my navigation in there. So, just grab all this, and paste it right there. What that will do is make the navigation not the background. The background will still go the full width of the browser.
But just the navigation text itself will be aligned into our grid. So, if I want to, right here, in this nav class, I can add a navbar and dark class. Let's save that. Switch back over here. Now, as I mentioned, this is the color of the text. It's assuming that my background is going to be dark. So, now the text is showing up in a light color. It's still there. But you can't really see it. This is assuming that I'm going to add a color that is dark.
So, I can use one of the color classes if I want to here. Remember, those are going to be like, bg-primary, bg-inverse, and so on and so forth. I'm going to use bg-primary. I'm going to add a class of bg-primary. Save that, and go back into our display. You can see that now, it's looking a lot better. If you want to, you can actually use your own color. I normally wouldn't do this. Let me take out bg-primary right here. I'm going to add a style tag, and again normally I would do this using my regular style sheets.
But just to show it to you, I'm just going to add a temporary style right here, and just set the background color to something that Bootstrap doesn't come with. I'm going to use a pink color here. C4226F. That should be a really beautiful pink color. That looks pretty good. It's really easy to actually make the color of the background whatever you want with something like this. Of course, there's a few navigation options that are pretty common for just about any type of navigation.
You can create an anchor tag with a class of navbar-brand. That's usually the title of your website. If you want to, we can come back here, and I'm going to add another anchor tag. I'll give it a class of navbar-brand. And, I'll give it just a link. It doesn't really matter what this says. So I'll just link it to something called, featured. Then I'll put in the title of the website here.
Now, let's go ahead and save that, and switch back over to our layout. You can see that appears as some text right here. if I want to, I can move that inside my container. Let's go ahead and put that in here. I think that's going to look a little bit better. There it is. There's some other options that I can do right here. If, for example, you want to make one of the links display in a more active color so that it looks like it's the current page perhaps, you can add an active class on the list item.
Let's go ahead and do that. It doesn't really matter which one I put it in. I'll do it on the first one. I'm going to say, active. Save this. If we go back to our site, you can see that now this home link becomes the active link. So, it's a little brighter than the other ones right now. You can control the position of the content within the navigation by using the pull-left and pull-right classes. This is the new version of them. They've actually changed from Bootstrap 3.
So, you use one of the break point sizes here. Like, SM or LG. Then the direction in which you want to make them pull. Let's go ahead and do that. We'll pull most of the navigation to the right, and leave the brand to the left. So, right here, I'm going to use the pull at the small break point to the right. Save that and now, when I preview my site you'll see that most of the navigation moves over to the right.
This stays over to the left. There's a slight round edge to the navigation. You can see that right here on the very edges. This looks a little weird because it's got some rounded edges. And, if we didn't have that container, it would round out the edges. It would actually look okay, but, when we make this go the full width of the browser, those look weird. You can fix that by using navbar-full. Go ahead and do that. We'll just add that right here on the nav. We'll say navbar-full.
And, let's go back. You can see that the edges are not rounded, and they go all the way out to the edge of the screen which looks really nice. Now, just like before in Bootstrap 3, you can also set the position of the navigation so that it is always fixed to the top or the bottom by using these two classes, navbar-fixed-top, or navbar-fixed-bottom. Let's go ahead and fix this to the top. Navbar-fixed-top, and save that. Let's go back here. You'll notice that the navigation's always to the top and you can scroll and the rest of the content won't push the navigation up.
You also notice that the headline actually got moved underneath this navigation. So, whenever you do this, you have to adjust your content so that it pushes down a little bit. That means that I'm going to just add another style tag to my container here. Again, I wouldn't normally add this on a normal website. I'd handle this with my style sheets. And, I'll just add a margin. Top of 70px, so that it moves down.
So now, that looks a little better. Hopefully you can tell that the new navigation is super easy to learn. It's a welcmoe change to the over-complicated old navigation. I wouldn't normally hard code style tags directly like I've done here. it just shows you how easy it is to customize the navigation with simple style changes.
- Installing the upgrade
- Using Reboot.css
- Using the new grid
- Working with new navigation and card components
- Understanding table and form changes