Schema

Pagination

The pagination component provides stylized links for any website or web application that contains multiple pagination.

Pagination, button groups, and forms are very similar in style, so they all inherit a lot of the same classes. You'll find we combined these two elements into one less file called btn-group_pagination. You may run into some styling also nested inside of the less file forms

The Default Pagination

The default pagination is a sleek and clean design that scales with any design.

EXAMPLE

<div class="pagination">
  <ul>
    <li><a href="#" class="btn btn-default">«</a></li>
    <li><a href="#" class="btn btn-default">1</a></li>
    <li><a href="#" class="btn btn-default">2</a></li>
    <li><a href="#" class="btn btn-default">3</a></li>
    <li><a href="#" class="btn btn-default">4</a></li>
    <li><a href="#" class="btn btn-default">5</a></li>
    <li><a href="#" class="btn btn-default">6</a></li>
    <li><a href="#" class="btn btn-default">»</a></li>
  </ul>
</div>

Add an active class to any element to show an active state.

EXAMPLE

<div class="pagination">
  <ul>
    <li><a href="#" class="btn btn-default">«</a></li>
    <li><a href="#" class="btn btn-default">1</a></li>
    <li><a href="#" class="btn btn-default">2</a></li>
    <li><a href="#" class="btn btn-default active">3</a></li>
    <li><a href="#" class="btn btn-default">4</a></li>
    <li><a href="#" class="btn btn-default">5</a></li>
    <li><a href="#" class="btn btn-default">6</a></li>
    <li><a href="#" class="btn btn-default">»</a></li>
  </ul>
</div>

Pagination With No Borders

Add the class no-b to pagination to get pagination design without borders.

EXAMPLE

<div class="pagination no-b">
  <ul>
    <li><a href="#" class="btn btn-default">«</a></li>
    <li><a href="#" class="btn btn-default">1</a></li>
    <li><a href="#" class="btn btn-default">2</a></li>
    <li><a href="#" class="btn btn-default">3</a></li>
    <li><a href="#" class="btn btn-default">4</a></li>
    <li><a href="#" class="btn btn-default">5</a></li>
    <li><a href="#" class="btn btn-default">6</a></li>
    <li><a href="#" class="btn btn-default">»</a></li>
  </ul>
</div>

Add an active class to an element to show an active state.

EXAMPLE

<div class="pagination no-b">
  <ul>
    <li><a href="#" class="btn btn-default">«</a></li>
    <li><a href="#" class="btn btn-default">1</a></li>
    <li><a href="#" class="btn btn-default">2</a></li>
    <li><a href="#" class="btn btn-default active">3</a></li>
    <li><a href="#" class="btn btn-default">4</a></li>
    <li><a href="#" class="btn btn-default">5</a></li>
    <li><a href="#" class="btn btn-default">6</a></li>
    <li><a href="#" class="btn btn-default">»</a></li>
  </ul>
</div>

Gradient Pagination

Need a gradient? We have you covered in that aspect as well!

EXAMPLE

<div class="pagination pagination-gradient">
  <ul>
    <li><a href="#" class="btn btn-default">«</a></li>
    <li><a href="#" class="btn btn-default">1</a></li>
    <li><a href="#" class="btn btn-default">2</a></li>
    <li><a href="#" class="btn btn-default">3</a></li>
    <li><a href="#" class="btn btn-default">4</a></li>
    <li><a href="#" class="btn btn-default">5</a></li>
    <li><a href="#" class="btn btn-default">6</a></li>
    <li><a href="#" class="btn btn-default">»</a></li>
  </ul>
</div>

Large Pagination

Add an pagination-lg class to increase the size.

EXAMPLE

<div class="pagination pagination-lg">
  <ul>
    <li><a href="#" class="btn btn-default">«</a></li>
    <li><a href="#" class="btn btn-default">1</a></li>
    <li><a href="#" class="btn btn-default">2</a></li>
    <li><a href="#" class="btn btn-default active">3</a></li>
    <li><a href="#" class="btn btn-default">4</a></li>
    <li><a href="#" class="btn btn-default">5</a></li>
    <li><a href="#" class="btn btn-default">6</a></li>
    <li><a href="#" class="btn btn-default">»</a></li>
  </ul>
</div>

Small Pagination

Or add an pagination-sm class to decrease the size.

EXAMPLE

<div class="pagination pagination-sm">
  <ul>
    <li><a href="#" class="btn btn-default">«</a></li>
    <li><a href="#" class="btn btn-default">1</a></li>
    <li><a href="#" class="btn btn-default">2</a></li>
    <li><a href="#" class="btn btn-default">3</a></li>
    <li><a href="#" class="btn btn-default">4</a></li>
    <li><a href="#" class="btn btn-default">5</a></li>
    <li><a href="#" class="btn btn-default">6</a></li>
    <li><a href="#" class="btn btn-default">»</a></li>
  </ul>
</div>