Showing the bootstrap breadcrumb to the users is the easiest way of displaying the structure of your internal links. If you have a large number of pages, you help your users to visit your page in a sequential manner by using the breadcrumbs for each page.
Here is the simple Bootstrap breadcrumb:-
|
1 2 3 4 5 6 |
<ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Categories</a></li> <li><a href="#">Products</a></li> <li class="active">Clothes</li> </ol> |
Output
What is Breadcrumb
A breadcrumb is a navigational hierarchy of your website page current location. You can display the current location of your website to the users using your website to get knowledge about some topic.
Benefits of Using the Bootstrap Breadcrumb on your Website
Displaying Hierarchy of page: If you want to display the structure of your website you can use bootstrap breadcrumb.
Show Navigational Links: Display the sequential order navigational links to the users. If help users to visit from parent to child pages and from child to parent pages.
Show Current Location of User: You can help your users by displaying the current location of your website using the breadcrumbs.
Increase Search Results: You can help Google to easily navigate through each page of your website easily by using the bootstrap breadcrumbs.
How to Create a Bootstrap Breadcrumb Navigational Hierarchy.
To create a breadcrumb, you have to use <ol> element with the Bootstrap class .breadcrumb.
If you want to make the navigational links active, you have to use the class .active with the list items
|
1 2 3 4 5 6 |
<ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Categories</a></li> <li><a href="#">Products</a></li> <li class="active">Clothes</li> </ol> |
Output