Bootstrap Pagination

Any website with multiple pages can employ the pagination feature to make the navigation easy for the user.

Here, we will learn about the features that Bootstrap has to offer for the pagination elements.

Bootstrap Basic Pagination

As told before, pagination helps the user to navigate through the different pages of the website.

Basically it is a series of links numbered consecutively for each page.

The current page number is highlighted with a different color and the series is preceded and followed by two links for ‘Next’ and ‘Previous’.

A basic bootstrap pagination can be created by adding a .pagination class to the <ul> element.

For each <li> item for this, we add the .page-item class and also a .page-link class class for all the links in the <li>.

The below code illustrates the creation of basic pagination

Active State

The highlighting of the current page, you can use the .active class.

Disabled State

Sometimes some page-link is to be disabled due to some temporary or conditional unavailability.

Bootstrap can make this possible with the help of the utility class .disabled.

See the code below:

Bootstrap Pagination Sizing

The classes used to regularize the sizes of the Pagination blocks are as following:

  • .pagination-lg: For larger pagination block size
  • .pagination-sm: For smaller pagination block size

Bootstrap Pagination Alignment

There are utility classes that will help controlling the alignment of the pagination:

  • pagination justify-content-center: To centre align the pagination blocks
  • pagination justify-content-end: To right align the pagination blocks

Bootstrap Breadcrumbs

Breadcrumbs are a variant of Pagination. Here, instead of page numbers, we have a series of pages that come under a similar category and navigation map.

The breadcrumbs are generally, hierarchical pages that you can directly access using the given links.

Mostly, these links are used to navigate back in backward direction.

The two utility classes for the same are:

  • .breadcrumb: Used with the <ul> element in place of .pagination class
  • .breadcrumb-item: Used with the <li> element in place of .page-item class