Bootstrap Breadcrumbs

In this tutorial you will learn how to create breadcrumbs with Bootstrap.

Creating Breadcrumbs with Bootstrap

A breadcrumb is a navigation scheme that indicates current page's location to the user within a website or application. Breadcrumb navigation can greatly enhance the accessibility of the websites having a large number of pages.

You can create static breadcrumbs layouts with Bootstrap simply using the class .breadcrumb on the unordered lists, like this:

  • <ul class="breadcrumb">
  •     <li><a href="#">Home</a></li>
  •     <li><a href="#">Products</a></li>
  •     <li class="active">Accessories</li>
  • </ul>

— The output of the above example will look something like this:

 

Tip:Separators inside the breadcrumbs components are added automatically via CSS through ::before pseudo-element and content property.

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.