In the second installment of our Bootstrap 3 tutorial, we build a responsive navbar with dropdown menus. On smaller mobile devices and tablets, the navbar collapses appropriately for optimal viewing.
Source files available on GitHub.
Video Transcript
Hey everybody this is Christopher Gimmer from BootstrapBay.com, and welcome to the second installment of our Bootstrap 3 tutorial. Today we’re going to be building a responsive navbar with dropdown menus.
In our first tutorial, we showed you guys how to install Bootstrap which is the source code that you’re looking at right now. If you haven’t already done so, make sure to check out our first video so you can follow along with us here.
First thing I’m going to do is get rid of this h1 tag that we’re not going to need to build our navbar.
Let’s get started right now.
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> </div>
There’s different kinds of stylings available. For the navbar-default, you’ll see that it’s kind of like a light grey colour. It might even be hard to see, and we can actually change that. If we wanted to go black, we can go navbar-inverse and you’ll notice that it changes to black. There’s different options available, but we’re going to leave this as default.
You also have the option of fixed or static. If you want the navbar to remain fixed at the top of the screen as you scroll down, you would leave it fixed, or you can change this to static. What that will do is, as you scroll down, the navbar won’t remain fixed at the top of the screen. We’re going to go ahead and leave this as fixed.
Next:
<div class="container"> </div>
This keeps everything inside the Bootstrap grid that is needed for the responsive design. So to illustrate that, if you type container here (within the container class), the text starts off here (within the grid). In contrast, if you type some text before the container class, you’ll see the text shows up all the way to the left. So you want to make sure you’re keeping everything within the container.
Finally:
<div class="navbar-header"> </div>
Now we have all the default styling for the navbar.
First thing we’re going to do is build the button that we need for our responsive design. What that’s gonna do is, as we collapse our browser, the button will show up, and that will enable us to expand our header for mobile and tablet devices.
We’re going to create that button right now. So we’re going to go:
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button>
We’re actually going to reference this down below which you’re going to see.
So now if we go to our preview, you’ll notice that when we shrink our browser, after a certain point, the button is now showing up. If you come across other responsive designs, you’ll probably notice that there are three icon bars that usually show up in this button. We’re going to go ahead and actually create that as well.
First thing we’re actually going to do is go:
<span class="sr-only">Toggle navigation</span>
This line of code is basically to make it accessible friendly for screen readers. You can look this up in the Bootstrap documentation, but it’s recommended you add tags for these screen readers.
And then we’re actually going to add the icon bars.
<span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
So now if we go back to our preview, when we shrink our browser, we now have our three icon bars and our button is ready to go.
So now let’s go ahead and start building our navbar.
Underneath this button, I’m going to go:
<a class="navbar-brand" href="#">BootstrapBay</a>
This is going to style this as your brand up here in the left of your navbar.
So now we’re going to go ahead and start building the right side of our header.
Underneath the navbar-header div tag, we’re going to start adding the contents of the right hand side of the navbar.
We’re going to go:
<div class="navbar-collapse collapse"> </div>
Up here you remember, we set the data-toggle to collapse and data-target as .navbar-collapse. This is what we’re referencing down here, the navbar-collapse. So basically what that’s going to do is when we collapse our browser, and the the jQuery kicks in, it’s going to reference the contents that we include in this div.
Let’s go ahead and start adding to this right now. We’re going to go:
<ul class="nav navbar-nav navbar-right"> </ul>
What that’s going to do is align everything properly on the right side. Now we’re going to build our list.
<li class="active"><a href="#">Home</a></li>
So now you’ll see we have our home on the right side, and you’ll see this box around it. That’s the active class. If we were to get rid of this you’ll see that the grey box disappears. We’re going to leave this as active. Usually people add this class for the menu that people are landing on.
Let’s continue to build off this now. We’re going to go:
<li><a href="#about">About</a></li>
Now we have our About. You’ll notice that this isn’t active so it doesn’t have the grey box around it.
So now for the fun part, let’s go ahead and create our drop-downs.
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Themes</a> </li>
So now when we preview, we have our themes here. If you click on it, you’ll notice that a little grey box stays around the theme indicating that it’s a dropdown. The issue is when you’re not clicking on it, it’s not evident that this is a dropdown menu. So what we’re going to do is add that little triangle beside it which is called a caret.
So right after Themes we’re going to go:
<b class="caret"></b>
So now a little triangle appears beside Themes and it’s very evident that it is a dropdown menu. So now we’re going to go ahead and build on that.
<ul class="dropdown-menu"> <li class="dropdown-header">Admin & Dashboard</li> </ul>
So now when you click on our Themes dropdown, you’ll see the Admin & Dashboard header. Now we’re going to build the links.
<li><a href="#">Admin 1</a></li> <li><a href="#">Admin 2</a></li>
Now we have our Themes drop-down, we have our Admin & Dashboard header, and we have our Admin 1 & Admin 2 themes.
So now I’m just going to copy this and I’m just going to change this to:
<li class="dropdown-header">Portfolio</li> <li><a href="#">Portfolio 1</a></li> <li><a href="#">Portfolio 2</a></li>
So now we go back to our preview, we have our Themes drop-down, our Admin & Dashboard header with our Admin 1 and 2 themes. We also have our Portfolio header with our Portfolio 1 and 2 themes.
We’re pretty much almost done here. All we’re going to do is add a contact header.
<li><a href="#">Contact</a></li>
So now once we shrink our browser, our button kicks in, we expand on that and we have all our header items. We can expand again on the drop-down and there are all our menu items ready to go.
So that’s it for our tutorial on building a responsive navbar with dropdown menus. We’ll be posting the source code available for download in the link in the description. Make sure to subscribe to our channel as we’ll be creating many more Bootstrap tutorials.
In our next video, we’ll be creating a footer with social media icons. We’ll see you in the next video.
Update: Part 2 – A Text Guide for Responsive Navbar
In this guide, you will learn how to build a responsive navbar with Bootstrap from scratch on a single web page. We are going to use some amazing features and functionalities.
A list of the tools we’re going to use in this guide:
1. Browser: Chrome
A nice feature of this browser is that we have access to Dev Tools (source code, console and so on). Also, you can toggle different devices so you’re able to see how a website will look on any device. You can literally simulate a mobile device and get a really good feel & look regarding how the website will be.
2. Text Editor:Â Atom
Atom is a text editor that’s modern, approachable, yet hackable to the core—a tool you can customize to do anything but also use productively without ever touching a config file.
3. Framework: Bootstrap
Bootstrap is a front-end framework and allows you to build a solid HTML structure and easily customize it. It gives you the ability to build really quick and, once you are used to every class that is available, it really makes web development easier.
Quick Overview of Bootstrap
Essentially, Bootstrap is a CSS and Javascript library. When you build using this front-end framework, you link to this library and you bring in beautiful pre-built classes. Here is the GitHub repository where you can find out more about Bootstrap.
Here you can find a section of amazing sites built with Bootstrap. You will see one of the main reasons why Bootstrap is very popular now: it makes it really easy to build websites.
So, in order to start with Bootstrap, we need to link to this CSS library. There are several ways to bring this library to our code. We can download it, we can get the Sass, compile it from source code. We chose to use the CDN links.
Bootstrap CDN
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
This is the quickest way to get going. CDN is a shared library that we access. The idea here is that multiple sites are utilizing or accessing this shared library to load quicker. We need to link to jQuery library before we link the Bootstrap Javascript because it is based on jQuery . You can also link to an optional theme (this is a pre-built styling). For more information on how to install Bootstrap, you can check the official documentation here.
We are going to start with the basic  HTML template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Copy this code and paste it over in the Atom text editor and get rid of the comments because we don’t need to refer to that. The next thing we should do is to refer to the Bootstrap library. Instead of downloading it, I’m going to link to CDN.
Of course, if you’re not using an internet connection the best idea would be to download it.
We are going to replace the link with the CDN for CSS and Javascript because we are using an internet connected device. The Atom editor will look like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Open the Index.html with Chrome and you should see a web page with Hello, world! This is basically our starting point. We don’t see any Bootstrap yet because we haven’t applied any styling classes.
I’m going to give you a quick run of Bootstrap classes to get a better idea on how to apply Bootstrap and how we can start building our structure.
How Bootstrap Works
Grid System, in essence, is the basic structure of our website. Previously, when we were building websites before CSS, we built them as tables. Then, CSS was used to position things within the website. By using CSS you have to add a lot of styling, but it’s not really ideal. Sometimes it is difficult to get items to the position you need them, especially when you optimize for mobile and resizing. It takes a lot of time in some cases to develop the exact website structure you want.
Here comes the Bootstrap grid system which gives us the ability to isolate out all those different structural pieces. We are using divs in order to structure the webpage by rows and columns and it’s all contained within a .container or .container-fluid. The difference between .container and .container-fluid is that .container has a fixed width and .container-fluid is full width, no matter what.
Let’s create our grid system in our project. In order to do that, erase
<h1>Hello, world!</h1>
and create a div with the class container.
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
</div>
If you check the index file, it should look like the screenshot from below:
Add some styling to see where the <divs> are breaking. As a temporary solution, add the following code above the head tag.
<style>
div {
border: 1px solid black;
}
</style>
</head>
Website structure
Currently, we have our basic Bootstrap layout, we are linking out to the Bootstrap CDN so we are pulling in the Bootstrap CSS library into our web project. We are also linking to jQuerry and pulling in the Bootstrap jQuerry library into the project.
Also, we are going to create a separate link to get to a style sheet to add additional style to our web project.
<link rel="stylesheet" href="style.css">
It looks we are ready to build our navigation bar. So first we are going to add the navbar and position it and add a container to it.
<nav class="navbar navbar-default navbar-fixed-top"> <div class="container"></div> </nav>
Let’s say we are going to use this navbar for a single page website. Let’s add some sections to the website in the body.
<section id="home" class="section">
<div class="container"></div>
</section>
<section id="about" class="section">
<div class="container"></div>
</section>
<section id="products" class="section">
<div class="container"></div>
</section>
<section id="contact" class="section">
<div class="container"></div>
</section>
So now, we have 4 main sections – Home, about, products and contact. We did this because we want to link to these sections from our navigation menu from the top of the page. We will have to set ids for these sections so we can target them by clicking a link.
The full code for our basic layout:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container"></div>
</nav>
<header>
<div class="container"></div>
</header>
<section id="home">
<div class="container"></div>
</section>
<section id="about">
<div class="container"></div>
</section>
<section id="products">
<div class="container"></div>
</section>
<section id="contact">
<div class="container"></div>
</section>
<footer>
<div class="container"></div>
</footer>
<!-- Modal -->
<div></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Now we should go to the CSS file we linked in our <head>. If you haven’t created a file named style.css now is the time.
I want a minimum height of 1000px. I want to set overflow to hidden (this will hide any content that is hanging off my available visual space. We are going to do position “relative” and add some padding at the top of each section of 80px.
.section {
min-height: 1000px;
overflow:hidden;
position: relative;
padding-top:80px;
}
Also, in order to see the difference between the sections (because we have no content there) we should add some color:
.section:nth-child(even){
background-color: #ccc;
}
Let’s build our navigation bar:
The first thing we should do here is to link to Font Awesome. Font Awesome gives us a library of nice and usable icons. They require no Javascript. You can check their website, select an icon and they give you a link to insert in your code.
We are going to use bars. This is something that you will typically see when your website is resizing. To implement Font Awesome we have to link to their CDN:
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
The code for bars icon is:
<i class="fa fa-bars" aria-hidden="true"></i>
We have to add the class “navbar-header” and a button. The class of the button is “navbar-toggle” that allows us to toggle the navbar. After that, we add ‘data-toggle=”collapse ‘. This is all information that is picked up by Bootstrap. Lastly, we have to add “data-target=’#top-navbar’ ” that allows us to specify where we want the collapse to happen.
<body>
<nav class="navbar navbar-default nav-bar-fixed-top"
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="top-navbar">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
<span class="navbar-brand">Company Name</span>
</div>
</div>
Now, let’s build our navigation bar. Add a div making sure you are within the navbar header. You should then make an unordered list ul and add items with links to sections from the body.
<div class="collapse navbar-collapse" id="top-navbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
The navbar source code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-navbar">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
<span class="navbar-brand">Company Name</span>
</div>
<div class="collapse navbar-collapse" id="top-navbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
The whole HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-navbar">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
<span class="navbar-brand">Company Name</span>
</div>
<div class="collapse navbar-collapse" id="top-navbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<header>
<div class="container"></div>
</header>
<section id="home" class="section">
<div class="container"></div>
</section>
<section id="about" class="section">
<div class="container"></div>
</section>
<section id="products" class="section">
<div class="container"></div>
</section>
<section id="contact" class="section">
<div class="container"></div>
</section>
<footer>
<div class="container"></div>
</footer>
<!-- Modal -->
<div></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
The CSS Stylesheet Code from style.css
.section {
min-height:1000px;
overflow:'hidden';
position:'relative';
padding-top:80px;
}
.section:nth-child(even){
background-color: #ccc;
}
Result
