We already touched Bootstrap 3 framework in past when we were exploring its responsive grid system. If you are interested, head to Bootstrap 3 grid system demystified Pt.1 post. Now, back to today’s topic. We are going to dive into Bootstrap 3’s navigation code to bring some clarity into it and understand what individual classes do. Without further ado, let’s begin!
Bootstrap 3 CDN:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
Quick note about CDN … CDN abbreviation stands for “Content Delivery Network”. You might know this, for example, from Google fonts website where you can find various fonts and use them in the same way – via including stylesheet link into the head of your page. Using CDN has several benefits. First, it speeds up the loading time of your page since it is not dependent on your hosting server. Second, it lowers the number of requests send to your server (hosting) which again lowers the loading time. Third, if the visitor already visited some website using same file on the same CDN, browser has it still loaded in cache (except the situation when user deleted cache) and so it doesn’t have to load it again. Result? Faster loading! Now, back to navigation …
<header role="banner"> <nav class="navbar navbar-default" role="navigation"> <div class="container"> <div class="navbar-header"> </div> <div class="collapse navbar-collapse" id="navbar-collapse"></div> </div> </nav> </header>
To explain what we’ve done so far … Role attributes have nothing to do with Bootstrap. They are part of aria and use to increase accessibility of the website. Navbar class is necessary since it includes proper styling of navigation. On the other hand, the navbar-default specifies the look of navigation. If you don’t like this light version, you can use navbar-inverse to turn it into darker version. This version has background set to very dark grey hue – #222.
When it comes to nav element, another classes are available. If you want to keep the navigation full-width and static, use navbar-static-top class. However, it is not necessary because the navigation will be static as default anyway. More interesting classes are navbar-fixed-top and navbar-fixed-bottom. These two will add CSS position classes set to “fixed” and either top or bottom set 0 depending on class you used. Also, notice the semantic sense of classes. They all start with navbar-* prefix (or just navbar) to tell you how and where you should use them.
The purpose of container class is for grid system and responsiveness – it will change its width to certain value due to resolution of the browser. You can also use container-fluid to keep it 100% width in all situations. The class navbar-header has a little meaning in sense of style – it just adds padding on sides and float itself to the left. It is used more like a container for button displayed on smaller resolution and logo or name of the website.
We will create four span elements between the opening and closing tags of the button. First one will contain text “Toggle navigation” and it will have class sr-only. This stands for “screen reader only” so it will be visible only for these devices. Remaining three spans will have class icon-bar. This will create the “burger” icon via three horizontal lines. If you want, you can use some icon instead. The last thing is to add the logo or name of the website. This will be a tag with class navbar-brand and it will be adjacent sibling of the button.
<div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Logo</a> </div>
Now, let’s move to div with id of navbar-collapse. Inside it we will nest unordered list with class nav and navbar-nav. Class nav will remove the bulletpoints on side and set its li elements to display “block” and position “relative”. Class navbar-nav will float the list to the left (you can also use navbar-left class to achieve that) and also remove margin. If you want the list to be on the right side, use navbar-right class.
The list item indicating the page you are on should include class active to add grey background. Also, the a element nested inside this list item should contain span with class sr-only for screen readers with text “(current)”. The rest of list items will contain just anchor tags with appropriate text values you want.
<div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li> <li><a href="#">Folio</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div>
And that’s all ladies and gentlemen! You have simple and clean navigation that is also fully responsive. For better clarity, below is whole HTML code for the navigation we used today. So, feel free and play with it.
<header role="banner"> <nav class="navbar navbar-default navbar-static-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Logo</a> </div> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li> <li><a href="#">Folio</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </nav> </header>
As you can see, Bootstrap offers many powerful options to boost your creative work. It depends only on you if and how will you use it. Now, feel free to use your new knowledge to create various types of navigation you can use on your website or of your clients.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂