## Pagination

Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.

Pagination on Bootstrap

#### Example

    <nav aria-label="Page navigation example">
      <ul class="pagination mb-0">
        <li class="page-item">
          <a class="page-link" href="#">
            <span class="fas fa-chevron-left"> </span>
          </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 active" aria-current="page">
          <a class="page-link" href="#">4</a>
        </li>
        <li class="page-item">
          <a class="page-link" href="#">5</a>
        </li>
        <li class="page-item">
          <a class="page-link" href="#"> <span class="fas fa-chevron-right"></span></a>
        </li>
      </ul>
    </nav>

#### Alignment

Change the alignment of pagination components with flexbox utilities.

    <!-- Center-->
    <nav aria-label="Page navigation example">
      <ul class="pagination justify-content-center">
        <li class="page-item"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</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 active" aria-current="page"><a class="page-link" href="#">4</a></li>
        <li class="page-item"><a class="page-link" href="#">5</a></li>
        <li class="page-item"><a class="page-link" href="#">Next</a></li>
      </ul>
    </nav>

    <!-- End-->
    <nav aria-label="Page navigation example">
      <ul class="pagination justify-content-end">
        <li class="page-item"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</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 active" aria-current="page"><a class="page-link" href="#">4</a></li>
        <li class="page-item"><a class="page-link" href="#">5</a></li>
        <li class="page-item"><a class="page-link" href="#">Next</a></li>
      </ul>
    </nav>

##### On this page

##### Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

##### Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize