Navigations
Breadcrumbs
Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb. Use our utilities to add additional styles as desired.
Default Breadcrumb
Using the .breadcrumb class on <nav> element.
Dark Breadcrumb
Using the .dark-mode .bg-inverse class on .breadcrumb.
<!-- default breadcrumb -->
<nav class="breadcrumb bg-white">
<a class="breadcrumb-item" href="#x"><span>Home</span></a>
<a class="breadcrumb-item" href="#x"><span>Link</span></a>
<span class="breadcrumb-item active"><span>Active</span></span>
</nav><!-- / breadcrumb -->
<!-- dark breadcrumb -->
<nav class="breadcrumb dark-mode bg-inverse">
<a class="breadcrumb-item" href="#x">Home</a>
<a class="breadcrumb-item" href="#x">Link</a>
<span class="breadcrumb-item active">Active</span>
</nav><!-- / breadcrumb -->
Default Pagination
Standard paginations with numbers. Add .pill-pagination for rounded pagination.
<!-- default pagination -->
<ul class="pagination">
<li class="page-item disabled"><a class="page-link" href="#x"><i class="bi-chevron-left mb-5"></i></a></li>
<li class="page-item active"><a class="page-link" href="#x">1</a></li>
<li class="page-item"><a class="page-link" href="#x">2</a></li>
<li class="page-item"><a class="page-link" href="#x">3</a></li>
<li class="page-item"><a class="page-link" href="#x"><i class="bi-chevron-right mb-5"></i></a></li>
</ul><!-- / pagination -->
<!-- pill-pagination -->
<ul class="pagination pill-pagination">
<li class="page-item disabled"><a class="page-link" href="#x"><i class="bi-chevron-left mb-5"></i></a></li>
<li class="page-item"><a class="page-link" href="#x">1</a></li>
<li class="page-item active"><a class="page-link" href="#x">2</a></li>
<li class="page-item"><a class="page-link" href="#x">3</a></li>
<li class="page-item"><a class="page-link" href="#x"><i class="bi-chevron-right mb-5"></i></a></li>
</ul><!-- / pill-pagination -->
Button Group Pagination
Button paginations wrapped in .btn-group.
<div class="btn-group btn-pagination" role="group" aria-label="First group">
<button type="button" class="btn btn-icon btn-highlight disabled">
<span class="bi-arrow-left"></span>
</button>
<button type="button" class="btn btn-icon btn-primary">
<span>1</span>
</button>
<button type="button" class="btn btn-icon btn-highlight">
<span>2</span>
</button>
<button type="button" class="btn btn-icon btn-highlight">
<span>3</span>
</button>
<button type="button" class="btn btn-icon btn-highlight">
<span class="bi-arrow-right"></span>
</button>
</div><!-- / button-group -->