7 days of unlimited WordPress themes, plugins & graphics - for free! Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 18Length: 1.9 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.3 The Navbar

In this lesson I'll introduce you to Bootstrap's navbar component and show you the different options it has.

4.3 The Navbar

Welcome back. In this lesson I will show you how to use the Bootstrap navbar. And I'm going to place it in the header of my page where I have this jumbotron component, which is basically this top area right here. And also my navigation. I'm going to start with this. A nav with a class of navbar and navbar-default. And for accessibility, I'm gonna say rule navigation. All right. Now this will place this navbar on the top of my page. Inside, I'm gonna do a container, and I'm gonna place all of my navbar components inside this one. In here, I'm gonna say, navbar header. Now the navbar header will have the navbar brand, which stands for the logo. And, if I want to create a responsive version, I'm going to add a button that will toggle that responsive version of the navbar. So, I'm going to start with a, with a class of navbar brand, and I'm just going to say, Brand. And there it is. Okay, for the button that will trigger, the responsive version. I'm gonna use a button. Type is gonna be button. The class, is gonna be a navbar toggle, it's a special class. Then for data-toggle, I'm gonna say collapse because it's expand collapse type of mechanism. And then, for data-target, I'm gonna use an id, let's say, example-nav-collapse. Inside the button, I'm just gonna do a span with a class of icon-bar, times three. Now you can't see it right now but if I resized this, there it is. And also for accessibility purposes again, I'm gonna add a co, a span or a class of sr-only, where I'm gonna put, Toggle navigation. This is a text that will be read by screen readers. And of course we can see it on this screen. Okay. So now for the actual tab contents. Outside this header div. I'm going to do a div with a class of collapse-navbar-collapse, and I'm going to give it an id of example navbar-collapse. It's the same id I used here, inside it you can put anything you want, you can put links, you can put dropdown menus, you can put forms, and so on. So, let's start with some simple links. I'm gonna say ul, with a class of nav, and navbar-nav, and I'm gonna put list that in times two with two links. That's gonna say, link number. [BLANK_AUDIO] And there it is. Link 1, Link 2. If you want to add an active class to a specific link. Simply add it to its parent list item. Like this. And what about forms? Well, you can add a form by using the form with a class of navbar-form. And also navbar-left to align that form on the left side. Okay, let's do, let's do, like, a search form. So, I'm going to say role search, and I'm going to use a div with a class of form group, and inside I'm going to put an input type text. I'm going to give it a class of form-control, and i'm going to apply a placeholder of search. And there it is. That is a search form. You can also add a button type submit. Let's give it a class of btn and btn-default, Submit, or Search. How ever you want to call it. If for example you want to move this form to the right, all you gotta do is change the class to navbar right, and it's gonna move it all the way there. Now if you have buttons that you want to add and they're not inside a form. You can do that by saying, let's say a with class of btn, btn-default, oops. This is a button. Let's refresh, and notice it's not vertically aligned inside the navbar, so by adding the extra class of navbar btn. You make sure that it's now properly aligned. Same goes for text. If you want to add a different text, for example, a paragraph, hello. It will break your layout unless you add the class of navbar text. [BLANK_AUDIO] And it's gonna put it right here. Now with all this content if we resize our page or view it on a smaller device notice that around 760 pixels, my navbar goes responsive. So, by clicking this, we should get a dropdown, but nothing's happening so I must have made a mistake somehow. Let's see. Type button navbar-toggle. That a target is example nav collapse. Oh, I did a small typo there. Example-nav-collapse, refresh and there it is. It shows you the lengths, the buttons, the texts, the search form, everything. Cool. So that's how you create the responsive nav contents. Now the navbar has a few more options. You can set it's position to fixed on the top or the bottom, by adding a class of, navbar-fixed-top. Refresh. So now if I have some more content and let's see where it is, demo-area. I'm gonna do a container here. I'm gonna, I'm gonna do some paragraphs with some Lorem ipsum text. I'm gonna copy these. [BLANK_AUDIO] A few times. All right. So now when we scroll, notice the navbar stays right there. Same goes for setting the navbar fixed to bottom. There it is, it's now on the bottom. And finally, if you want a different variation of this sidebar, you can use the navbar-inverse class, and this will create a dark navbar instead of the traditional one. And, of course, this can be modified through CSS but as a default one, you get various options. So there you go, lots of options for this component, as I said. And you can use it in a variety of situations, depending on how you want the navbar to look like or what it should contain. Now, moving on, I wanna show you a component that's been added in Version 3, the List Group. That's coming up next.

Back to the top