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 a website having a large number of pages or complex navigational hierarchy.
You can create static breadcrumbs layouts with Bootstrap simply using the class .breadcrumb on the ordered lists, as demonstrated in the following example:
Example
Try this code »<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Products</a></li>
<li class="breadcrumb-item active">Accessories</li>
</ol>
</nav>— The output of the above example will look something like this:
The default breadcrumb separator is /. But, you can change it with a little custom CSS, for example, if you want to use > as separator, you can apply the following style rules:
Example
Try this code ».breadcrumb-item + .breadcrumb-item::before {
content: ">";
}— The output of the above example will look something like this:
