Table of Contents
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!
Assets
To be able to work with Bootstrap 3 classes and architecture we need to include necessary files – CSS for styles and JavaScript for dynamics. You can do this in two ways. First, go to Bootstrap 3 homepage (odkaz), on “Getting started” page download the whole pack and extract it to your project. Second, on the same page go a bit lower to “Bootstrap CDN” section and copy the links for CSS (bootstrap.min.css) and JavaScript (bootstrap.min.js). Then insert these links into the head of your HTML file and you are ready to go. However, below I include the necessary links for you.
Bootstrap 3 CDN:
CSS:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
JavaScript:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
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 …
HTML
Let’s begin by creating the basic structure for the navigation. This includes header element with role attribute with value “banner”. Inside it will be nested nav element with class navbar, navbar-default role “navigation”. Now we will use div element with class container that will contain another two divs. First div will have class navbar-header and second one collapse” and navbar-collapse to make the navigation responsive. Keep in mind that navbar-collapse class requires JavaScript to work.
HTML:
<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.
So, let’s nest the button element and placeholder for the name of the website into navbar-header div. The button will have class navbar-toggle, data-toggle attribute set to “collapse” and data-target set to either class or id of the sibling div with class navbar-collapse to connect the button with navigation list and make it “toggleable”. Thanks to class navbar-toggle the button will be hidden on screen wider than 768px. On smaller screen, when icon is visible, JavaScript will also add class collapsed when you close the navigation. This class will be copied from the data-toggle attribute. Also, don’t forget to include type attribute set to “button”.
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.
HTML:
<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.
HTML:
<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.
Whole HTML:
<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>
Summary
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 🙂
Become a Patron
