Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS. See official bootstrap document
Use classes with
.breadcrumb
for creating simple breadcrumb.
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">All images</a></li>
<li class="breadcrumb-item"><a href="#">Jampack</a></li>
<li class="breadcrumb-item active" aria-current="page">Gallery</li>
</ol>
</nav>
Use.breadcrumb-sm
classes with .breadcrumb
for sizes.
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-simple">
<li class="breadcrumb-item"><a href="#">All images</a></li>
<li class="breadcrumb-item"><a href="#">Jampack</a></li>
<li class="breadcrumb-item active" aria-current="page">Gallery</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-sm breadcrumb-simple">
<li class="breadcrumb-item"><a href="#">All images</a></li>
<li class="breadcrumb-item"><a href="#">Jampack</a></li>
<li class="breadcrumb-item active" aria-current="page">Gallery</li>
</ol>
</nav>