Build a Responsive Navbar in Bootstrap

[00:00] Every website needs a navigation bar. While we aren't going to have any links that go anywhere currently, it's an important aspect of a website to cover. Navbars with Bootstrap have a lot of styles attached to the classes that aren't easily apparent or intuitive. I'll be explaining them as I go, but I highly advise you dive into the docs and try out [00:20] different combinations to find what you like. For the code in each lesson, they're going to be wrapped with a section tag and an ID. Sections will both help split code up visually as well as contribute to accessibility. The IDs we'll use in the footer to link to the different sections of our web page. This section will have an [00:40] ID of Navbar. Create a nav element, and in the class, add in our 1st bootstrap class, Navbar. This sets up our Navbar with Bootstrap's predetermined CSS and JS such as collapsing items into a hamburger menu. We can use navbar [00:59] expand lg to show the navbar items on a large screen size and higher. Otherwise, collapse it into a hamburger menu, which we'll set up in a second. Bg body tertiary will set the background color to Bootstrap's tertiary color. As a side note, Bootstrap has a list [01:19] of preset colors for you to use. I'll have a link to the documentation on that in the description. Next, create a div and set the navbar to expand the whole width of the screen using container fluid. If you remember, container allows us to use the grid system and add in padding and margins so that it won't reach the full width of [01:39] the page. Container fluid will still let us use the grid system but allows the element to reach the edges of the window, giving it that padding but removing the margin. The leftmost item on every nav bar is the company icon or name. Create an anchor tag. The Href will just be [01:59] hashtag. And give it the class of navbar brand. This auto adjusts the size, color, and underline of our link. Let's add in some navbar items. Create a div. In here, we will have an unordered list which will hold 4 [02:19] links. Create 4 anchor tags and give each of them some text. I'll choose home, features, pricing, and I'll show off a disable button. [02:40] For each link, we can customize it using nav dash link. This formats the links by removing the underlines and changing the text color from blue to black for active or dark gray for inactive. Add the active class to the first anchor tag and disable to the last [03:00] anchor tag. Lastly, add navbar dashnav to the unordered list. As you can see, the home nav item is slightly darker than the others, and our disabled item is grayed out and unable to be clicked. [03:20] This looks a little wonky on smaller screens, but looks great on large and above. This is because we set it to collapse on screens smaller than large. We can add in a hamburger menu that will contain these items on smaller screen sizes. And to do this, we need a button that will link to the navbar items. [03:40] For the div containing the unordered list, add in collapse, navbar collapse, and justify content end as classes. Justify content end will set all of our navbar items to the right side. Collapse will collapse the items into the hamburger menu. And navbar collapse will display the items [04:00] when they are not collapsed, so when we click on the hamburger menu. Give the div an ID of navbar items as well. Now for the hamburger button, I'm going to paste it in and go over its contents. NavbarToggler adds in some lovely styling. [04:20] Data bs toggle collapse will show the items when we click on the hamburger menu. Data dashbs target hashtag navbar items links to the ID of the element that we want to collapse. Lastly, the span with the class of navbar toggler [04:39] icon is the hamburger menu icon itself. We can change the screen size, see that it collapses down into our hamburger menu. And when we click on it, our items display. We now have a fully functional and responsive navbar.