Pagination

Default

Simple

<!-- Pagination -->
<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="javascript:void(0)">Previous</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">Next</a></li>
  </ul>
</nav>
<!-- /pagination -->

Icon

Disabled & Active

Sizing

Large

<!-- Pagination -->
<nav>
    <ul class="pagination pagination-lg">
        <li class="page-item disabled">
            <a class="page-link" href="javascript:void(0)" tabindex="-1">1</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="javascript:void(0)">2</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="javascript:void(0)">3</a>
        </li>
    </ul>
</nav>
<!-- /pagination -->

Small

Alignment

Start

<!-- Pagination -->
<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="javascript:void(0)">Previous</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0)">Next</a></li>
  </ul>
</nav>
<!-- /pagination -->

Center

End