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
content) to the list as well as
display: inline-block to the
li element — resulting in that “breadcrumb” effect.
Creating a Breadcrumb
To create a breadcrumb:
ulelement that represents the breadcrumb.
- Add the
.breadcrumb-itemclass to each
lielement within the breadcrumb.
- Also add
lithat represents the current page/section (the page that the user is currently on) — which would almost always be the last crumb in the breadcrumb.
Breadcrumbs don’t necessarily need to be in a list. You can use them like this if required:
Bootstrap 3 only requires the
.breadcrumb class on the
Bootstrap 4 also requires
.breadcrumb-item to be applied against each item in the breadcrumb.