Bootstrap Breadcrumbs

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

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:

Bootstrap Breadcrumbs

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