Bootstrap 4 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 class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Fruit</a></li>
<li class="breadcrumb-item active">Pears</li>
</ul>

Creating a Breadcrumb

To create a breadcrumb:

Add class="breadcrumb" to the ul element that represents the breadcrumb.
Add the .breadcrumb-item class to each li element within 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.

Non-List Breadcrumbs

Breadcrumbs don't necessarily need to be in a list. You can use them like this if required:

<div class="breadcrumb">
<a class="breadcrumb-item" href="#">Home</a>
<a class="breadcrumb-item" href="#">Fruit</a>
<span class="breadcrumb-item active">Pears</span>
</div>

Bootstrap 3 only requires the .breadcrumb class on the ul tag.

Bootstrap 4 also requires .breadcrumb-item to be applied against each item in the breadcrumb.