Bootstrap Breadcrumbs

In bootstrap, breadcrumb is a navigation component and it helps you to 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 be indicated 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 like as shown below.

 

Bootstrap breadcrumb example result

 

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

 

Live Preview

.breadcrumb-item + .breadcrumb-item::before {

    content: ">";

}

The above custom CSS will change the breadcrumb style like 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.