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.
<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.
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.
The above custom CSS will change the breadcrumb style like as shown below.
This is how we can create the breadcrumbs in bootstrap to indicate the current page location with a navigational hierarchy based on our requirements.