Bootstrap Breadcrumbs

In bootstrap, breadcrumb is a navigation component, and it helps you identify the current page location by providing the site navigational hierarchy.

 

To implement the breadcrumb in bootstrap, you need to create an ordered list <ol> element with .breadcrumb class in <nav> component. After that, add breadcrumb list items to an ordered list (<ol>) using <li> element with .breadcrumb-item class. The current page of the website can indicate by adding the .active class to the list item.

 

Live Preview <nav>
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Home</a>
      </li>
      <li class="breadcrumb-item"><a href="#">Tutorials</a>
      </li>
      <li class="breadcrumb-item active">Bootstrap Tutorial</li>
    </ol>
</nav>

The above example will return the result as shown below.

 

Bootstrap breadcrumb example result

 

If you observe the above result, the default breadcrumb item separator is /. If you want to use a different separator like >, you need to use the custom CSS as shown below.

 

Live Preview .breadcrumb-item + .breadcrumb-item::before {
   content: ">";
}

The above custom CSS will change the breadcrumb style as shown below.

 

Bootstrap custom style breadcrumb example result

 

This is how we can create the breadcrumbs in bootstrap to indicate the current page location with a navigational hierarchy based on our requirements.