How to Add and Customize Twitter Bootstrap3 Breadcrumbs

It's a good practice to add breadcrumbs to websites/blogs to enhance the users to find their way around. Also it indicates user’s location (page) and hierarchy of the page within a website. Twitter bootstrap 3 comes with built-in CSS component for adding breadcrumbs. I'll show you how to add and customize the default bootstrap breadcrumb styles as per your requirement. You will learn about breadcrumb customizations such as changing bootstrap breadcrumbs separator, changing its background color, text color etc.

For this tutorial, I assume you already have some basic working knowledge with bootstrap and know how to integrate bootstrap with HTML page. If you are new to bootstrap, here is a good tutorial about Creating Responsive Navbar with Bootstrap 3 which gives you knowledge about integrating bootstrap with HTML.

How to Add Breadcrumbs in Twitter Bootstrap?

To add breadcrumbs create an unordered list and add the page links you want. Next add "breadcrumb" class to the <ul> element.

HTML Markup for Adding Bootstrap Breadcrumbs

<div class="container">
     <ul class="breadcrumb">
          <li><a href="#">Home</a></li>
          <li><a href="#">Services</a></li>
          <li class="active">Data Mining</li>
     </ul>
</div>

The default bootstrap breadcrumbs will now look like this.

Twitter Bootstrap3 Default Breadcrumbs

Customizing Bootstrap Breadcrumb Styles

In order to customize the default breadcrumbs in bootstrap we've created above, we have to override the original bootstrap breadcrumb styles.

Here is the CSS Code I've used to customize the bootstrap breadcrumbs.

Change Bootstrap Breadcrumbs Background Color

/*change breadcrumb background color*/
.breadcrumb {
     background-color: #FAFAFA;
     border-radius: 0;
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
     -o-border-radius: 0;
}

Change Bootstrap Breadcrumbs Text Color

/*change breadcrumb links color*/
.breadcrumb a {
     color: #666;
}

.breadcrumb a:hover {
     text-decoration: none;
}

/*change active color*/
.breadcrumb > .active {
     color: #9CD05F;
}

Change Bootstrap Breadcrumbs Separator

/*change breadcrumb separator to raquo symbol*/
.breadcrumb > li + li:before {
     content: "\00BB";
     color: #aaa;
}

With all the above css customizations our twitter bootstrap breadcrumbs now look like this.

Twitter Bootstrap3 Customized Breadcrumbs

Here is the complete css code to customize bootstrap breadcrumbs styles.

/*customize breadcrumb*/
.breadcrumb {
     background-color: #FAFAFA;
     border-radius: 0;
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
     -o-border-radius: 0;
}

/*change breadcrumb links color*/
.breadcrumb a {
     color: #666;
}

.breadcrumb a:hover {
     text-decoration: none;
}

/*change active color*/
.breadcrumb > .active {
     color: #9CD05F;
}

/*change breadcrumb separator to raquo symbol*/
.breadcrumb > li + li:before {
     content: "\00BB";
     color: #aaa;
}

Now that was all about customizing bootstrap breadcrumb styles. Hope you have liked this bootstrap tutorial.