Basic Pagination

If you have a web site with lots of pages, you may wish to add some sort of pagination to each page.

To create a basic pagination, add the .pagination class to an <ul> element:

EXAMPLE:

Active State

The active state shows what is the current page.

Add class .active to let the user know which page he/she is on:

EXAMPLE:

Disabled State

A disabled link cannot be clicked.

Add class .disabled if a link for some reason is disabled:

EXAMPLE:

Pagination Sizing

Pagination blocks can also be sized to a larger size or a smaller size.

Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks:

EXAMPLE:

Breadcrumbs

Another form for pagination, is breadcrumbs.

The .breadcrumb class indicates the current page's location within a navigational hierarchy:

EXAMPLE:

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Private</a></li>
  <li><a href="#">Pictures</a></li>
  <li class="active">Vacation</li>
</ul>