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.
The above example will return the result as shown below.
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.
The above custom CSS will change the breadcrumb style 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.