(Twitter) Bootstrap – Simple Navbars

Today we’ll take a look at the (Twitter) Bootstrap Navbar component.

The basics about navigation markup

If you haven’t written any HTML markup for a navigation menu before you will find a short explanation how to do this in this paragraph. If you’re already familiar with this you can skip this section.

A navigation menu basically consists of an unordered list containing two or more list items. The number of list items depends on the number of pages you want to link to.

<ul>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

Inserted into each list item you’ll find an anchor with a href attribute. The URL of the page that you want to link to can be found between ” and ” after the href attribute. If you’ll see a # instead of a real URL this means that the URL has still to be inserted. Usually this is done in the final stages when all the pages have been created and their URL’s are chosen.

If you are new to the use of hyperlinks it might be a good idea to read this tutorial about Hyperlinks before continuing.

<ul>
  <li><a href="http://www.webdesignforbeginners.info">Home</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>

The name of the page that you want to appear in the menu is inserted between the opening and the closing <a> tags.

You will usually also find a class=”active” in a navigation.

<ul>
  <li class="active">
    <a href="#">Home</a>
  </li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>

This is done so that the list item for the active page can be styled a bit differently. That way a visitor of a website can see which page he/she is currently on. In the final stages of creating a complete website this class is inserted in the navigation markup of every specific page.

General remarks about (Twitter) Bootstrap Navbar

A (Twitter) Bootstrap is also made up of an unordered list, several list items and the <a> tags.

The appearance or style of the Bootstrap Navbar has been created with CSS and can be found in the file bootstrap.css (or it’s minified version).

If you are already skilled in writing basic markup for the navigation you only need to get used to the classes used by Bootstrap for the Navbar (e.g. navbar, navbar-inner, navbar-fixed-top). The examples below will guide you through this and at the end of this tutorial you will have no problems at all in creating your own Navbar.

Understanding the Bootstrap Navbar classes is essential. Even if you do not want to create your own Navbar but want to copy an existing Navbar example you still need to understand the classes. A lot of the questions people ask on forums about why their Navbar doesn’t do what they require it do to are the result of a lack of understanding of the Navbar classes.

In this tutorial we will only use Navbar markup that doesn’t require Javascript. We’ll look at examples of Navbars with dropdowns that do require Javascript in one of the next tutorials. But today we will do without.

Basic Navbar

So let’s start with a very simple Navbar looking like this:

Navbar simple

To achieve this we only need to add the appropriate Bootstrap Navbar classes to the markup that we saw earlier on in this tutorial:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Simple Bootstrap Navbar</title>
</head>
<body>
<nav class="navbar">
<div class="navbar-inner">
<ul class="nav">
  <li class="active">
    <a href="#">Home</a>
  </li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>
</div>
</nav>
</body>
</html>

Don’t forget the link to the Bootstrap stylesheet (see the head section in the markup aboven).

Adding an item to the navigation

One of the first things we often need to do is adapt the number of list items to the number of pages on the website. Here we’ll limit ourselves to adding one extra link:

Navbar with extra link

We can use the same markup as before. But we need to insert one extra list item (see line 17):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Simple Bootstrap Navbar with extra link</title>
</head>
<body>
<nav class="navbar">
<div class="navbar-inner">
<ul class="nav">
  <li class="active">
    <a href="#">Home</a>
  </li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Extra Link</a></li>
</ul>
</div>
</nav>
</body>
</html>

This is an example of adding an extra item to the navigation at the same level as the existing items. In one of the next tutorials we’ll talk about how you can add (sub)items at a lower level. To do this you need to use the dropdown component and that requires Javascript. So we’ll leave that for later on.

Using a divider between navigation items

To create a clearer distinction between one item in the navigation and another we can use a divider:

Navbar with divider

A divider creates some extra space and inserts a vertical border between neighbouring items:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Navbar with divider</title>
<style>
.navbar .divider-vertical {
  border-right: 1px solid #F60;
  border-left: 1px solid #F60;
}
</style>
</head>
<body>
<nav class="navbar">
<div class="navbar-inner">
<ul class="nav">
  <li class="active">
    <a href="http://www.webdesignforbeginners.info">Home</a>
  </li>
  <li><a href="#">Link</a></li>
  <li class="divider-vertical"></li>
  <li><a href="#">Link</a></li>
  <li class="divider-vertical"></li>
  <li><a href="#">Link</a></li>
</ul>
</div>
</nav>
</body>
</html>

The default divider is difficult to see with the default styling of the Navbar. To make it easier to see I gave it a different color (see the styling in the head section). So you can change this to a better suited color or leave out the style rules in the head section altogether.

Inserting your Brand in the Navbar

A website without some indication of it’s owner is hard to imagine. For this Bootstrap provides us with the Brand option.

Navbar with Brand

Using the brand class will give us a slightly different styling for this text compared to the links in the Navbar.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Navbar with Brand</title>
</head>
<body>
<nav class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Brand</a>
<ul class="nav">
  <li class="active">
    <a href="#">Home</a>
  </li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>
</div>
</nav>
</body>
</html>

Replacing the Brand by a Logo in the Navbar

Instead of a Brand (text) we can also insert a logo into the Navbar:

Navbar with logo

To achieve this we only need to replace the ‘Brand’ text with our logo image file:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Navbar with logo</title>
<style>
.navbar .brand {
	padding: 5px;
}
</style>
</head>
<body>
<nav class="navbar">
<div class="navbar-inner">
    <a class="brand" href="http://www.webdesignforbeginners.info">
        <img src="img/wdfblogo.png" alt="logo">
    </a>
<ul class="nav">
  <li class="active">
    	<a href="#">Home</a>
  </li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>
</div>
</nav>
</body>
</html>

I added some extra styling to get the correct padding for the logo.

A Navbar that spans a fixed width

By default the Bootstrap Navbar spans the entire width of the page. Sometimes we prefer to have the Navbar span only part of that width:

Navbar only part of page width

I have given the (body) background a different color so you can see where the Navbar ends.

We can achieve another width for the Navbar with the help of the navbar class:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Navbar that spans fixed width</title>
<style>
.navbar {
	width: 350px;
}
</style>
</head>
<body>
<nav class="navbar">
<div class="navbar-inner">
<ul class="nav">
  <li class="active">
    <a href="#">Home</a>
  </li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>
</div>
</nav>
</body>
</html>

See how easy it is and how quick you get used to the Bootstrap way of creating Navbars. There are still more possibilities. In the next tutorial we’ll look at how you can position the Navbar at the top of the page or below a header.

These are the Bootstrap tutorials in this series: