Bootstrap Pagination

Pagination is used to enable navigation between pages in a website. The pagination used in Bootstrap has a large block of connected links that are hard to miss and are easily scalable.

Basic Pagination:

The basic pagination can be specified using the following classes.

  • The .pagination class is used to specify pagination on a list group.
  • The .page-item class is used to specify each pagination item in the group.
  • The .page-link class is used to specify the link in the pagination item.

Example -

Bootstrap Active State

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

Example -

Disabled State

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

Example -

Pagination Sizing

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

Example -

Breadcrumbs

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

Example -