Pagination

Bootstrap Pagination is a component used to indicate existence of a series of related content across multiple pages and enables navigation across them.

We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. We use a wrapping <nav> element to identify it as a navigation section to screen readers and other assistive technologies.

Examples

Default Pagination example.

html

          <nav aria-label="Page navigation example">
            <ul class="pagination">
              <li class="page-item">
                <a class="page-link" href="#">Prev</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="#">1</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="#">2</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="#">3</a>
              </li>
              <li class="page-item"><a class="page-link" href="#">Next</a></li>
            </ul>
          </nav>

Rounded Pagination

html

          <nav aria-label="Page navigation example">
            <ul class="pagination pagination-dark">
              <li class="page-item">
                <a class="page-link page-link-round" href="#">Prev</a>
              </li>
              <li class="page-item">
                <a class="page-link page-link-round" href="#">1</a>
              </li>
              <li class="page-item">
                <a class="page-link page-link-round" href="#">2</a>
              </li>
              <li class="page-item">
                <a class="page-link page-link-round" href="#">3</a>
              </li>
              <li class="page-item">
                <a class="page-link page-link-round" href="#">Next</a>
              </li>
            </ul>
          </nav>

Different Pagination Styling

Default Pagination example.

html

            <ul class="pagination">
              <li class="page-item">
                <a class="page-link text-dark bg-light" href="#">Prev</a>
              </li>
              <li class="page-item">
                <a class="page-link text-dark bg-light" href="#">1</a>
              </li>
              <li class="page-item">
                <a class="page-link text-dark bg-light" href="#">2</a>
              </li>
              <li class="page-item">
                <a class="page-link text-dark bg-light" href="#">3</a>
              </li>
              <li class="page-item">
                <a class="page-link text-dark bg-light" href="#">Next</a>
              </li>
            </ul>
          </nav>
          <nav aria-label="Page navigation example">
            <ul class="pagination">
              <li class="page-item">
                <a class="page-link text-dark bg-warning" href="#">Prev</a>
              </li>
              <li class="page-item">
                <a class="page-link text-dark bg-warning" href="#">1</a>
              </li>
              <li class="page-item">
                <a class="page-link text-dark bg-warning" href="#">2</a>
              </li>
              <li class="page-item">
                <a class="page-link text-dark bg-warning" href="#">3</a>
              </li>
              <li class="page-item">
                <a class="page-link text-dark bg-warning" href="#">Next</a>
              </li>
            </ul>
          </nav>
          <nav aria-label="Page navigation example">
            <ul class="pagination">
              <li class="page-item">
                <a class="page-link text-white bg-danger" href="#">Prev</a>
              </li>
              <li class="page-item">
                <a class="page-link text-white bg-danger" href="#">1</a>
              </li>
              <li class="page-item">
                <a class="page-link text-white bg-danger" href="#">2</a>
              </li>
              <li class="page-item">
                <a class="page-link text-white bg-danger" href="#">3</a>
              </li>
              <li class="page-item">
                <a class="page-link text-white bg-danger" href="#">Next</a>
              </li>
            </ul>
          </nav>

Different Sizes

Default Pagination example.

html

          <nav aria-label="Page navigation example">
            <ul class="pagination pagination-lg">
              <li class="page-item">
                <a class="page-link" href="#">Prev</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="#">1</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="#">2</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="#">3</a>
              </li>
              <li class="page-item"><a class="page-link" href="#">Next</a></li>
            </ul>
          </nav>
          <nav aria-label="Page navigation example">
            <ul class="pagination">
              <li class="page-item">
                <a class="page-link" href="#">Prev</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="#">1</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="#">2</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="#">3</a>
              </li>
              <li class="page-item"><a class="page-link" href="#">Next</a></li>
            </ul>
          </nav>
          <nav aria-label="Page navigation example">
            <ul class="pagination pagination-sm">
              <li class="page-item">
                <a class="page-link" href="#">Prev</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="#">1</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="#">2</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="#">3</a>
              </li>
              <li class="page-item"><a class="page-link" href="#">Next</a></li>
            </ul>
          </nav>