Bootstrap 3 Breadcrumbs

Add breadcrumbs by adding a single class name.

Bootstrap provides the .breadcrumb class which styles a list into a breadcrumb.

Bootstrap adds separators (by using :before and content) to the list as well as display: inline-block to the <li> element — resulting in that "breadcrumb" effect.

<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Fruit</a></li>
<li class="active">Pears</li>
</ul>

Creating a Breadcrumb

To create a breadcrumb, add class="breadcrumb" to the <ul> element that represents the breadcrumb.

Also add class="active" to the <li> that represents the current page/section (the page that the user is currently on) — which would almost always be the last crumb in the breadcrumb.