Documentation and examples for using Muse custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
Bootstrap Pagination documentation
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#0">Previous</a></li>
<li class="page-item"><a class="page-link" href="#0">1</a></li>
<li class="page-item"><a class="page-link" href="#0">2</a></li>
<li class="page-item"><a class="page-link" href="#0">3</a></li>
<li class="page-item"><a class="page-link" href="#0">Next</a></li>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#0" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#0">1</a></li>
<li class="page-item"><a class="page-link" href="#0">2</a></li>
<li class="page-item"><a class="page-link" href="#0">3</a></li>
<li class="page-item">
<a class="page-link" href="#0" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#0" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#0">1</a></li>
<li class="page-item active">
<a class="page-link" href="#0">2 <span class="sr-only">(current)</span></a>
</li>
<li class="page-item"><a class="page-link" href="#0">3</a></li>
<li class="page-item">
<a class="page-link" href="#0">Next</a>
</li>
</ul>
</nav>
Fancy larger or smaller pagination? Add .pagination-lg
or .pagination-sm
for additional sizes.
<nav aria-label="...">
<ul class="pagination pagination-lg">
<li class="page-item disabled">
<a class="page-link" href="#0" tabindex="-1">1</a>
</li>
<li class="page-item"><a class="page-link" href="#0">2</a></li>
<li class="page-item"><a class="page-link" href="#0">3</a></li>
</ul>
</nav>
<nav aria-label="...">
<ul class="pagination pagination-sm">
<li class="page-item disabled">
<a class="page-link" href="#0" tabindex="-1">1</a>
</li>
<li class="page-item"><a class="page-link" href="#0">2</a></li>
<li class="page-item"><a class="page-link" href="#0">3</a></li>
</ul>
</nav>
Change the alignment of pagination components with flexbox utilities.
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#0" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#0">1</a></li>
<li class="page-item"><a class="page-link" href="#0">2</a></li>
<li class="page-item"><a class="page-link" href="#0">3</a></li>
<li class="page-item">
<a class="page-link" href="#0">Next</a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link" href="#0" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#0">1</a></li>
<li class="page-item"><a class="page-link" href="#0">2</a></li>
<li class="page-item"><a class="page-link" href="#0">3</a></li>
<li class="page-item">
<a class="page-link" href="#0">Next</a>
</li>
</ul>
</nav>
<nav class="d-flex justify-content-between align-items-center" aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#0" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#0">1</a></li>
<li class="page-item"><a class="page-link" href="#0">2</a></li>
<li class="page-item"><a class="page-link" href="#0">3</a></li>
<li class="page-item disabled"><a class="page-link" href="#0">...</a></li>
<li class="page-item"><a class="page-link" href="#0">8</a></li>
<li class="page-item">
<a class="page-link" href="#0" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
<small class="text-muted">Showing 3 of 8</small>
</nav>