Bootstrap 4 Pagination

Bootstrap pagination is used to show the existence of a series of web pages of the website. It allows navigation on multiple pages of a website.

In pagination, there is a block of connected links that are easily scalable. Pagination is created with the help of an HTML element List so that the users can see the number of available links.

Example

Almost every search engine uses pagination to show the number of search results on the web pages.

Bootstrap 4 Pagination

Steps for creating basic pagination

  • Use wrapping element <nav> for specifying navigation section.
  • Add unordered list <ul> element with .pagination class.
  • Add list item <li> element with .page-item class.
  • Add .page-link class within the <a> element to provide link
  • Add <a> element with .page-link class inside the <li> element.

Syntax

Example

Output

Bootstrap 4 Pagination

Active and Disabled state – We can customize the pagination links as per the requirement. Pagination offers two classes for customizing links, these classes are .active class and .disable class.

The .disable class is used when we want to make our link un-clickable. This class uses CSS property “pointer-events: none;” to disable the functionality of links of <a> elements. Although, this property only disables mouse clicking. Users can still click on the disabled link with the help of keyboard keys. To make the link fully disabled we have to use the attribute  tabindex = “ -1” and some custom javascript.

The .active class is used to show or highlight the current page.

Example

Output

Bootstrap 4 Pagination

Pagination Sizing – Like other components of bootstrap 4, we can also customize the pagination size. There are two classes for resizing the pagination are given below.

  1. The .pagination-lg class is used to make the pagination size bigger than the default size.
  2. The .pagination-sm class is used to make the pagination size smaller than the default size.

Example

Output

Bootstrap 4 Pagination

Pagination Alignment – The default alignment of the pagination component is left. By using some flexbox utilities we can also change the alignment of the pagination to the right or center.

  • Add the .justify-content-center class with the <ul> element to set the alignment of the pagination to the center.
  • Add the .justify-content-end class with the <ul> element to set the alignment of the pagination to the right.

Example

Output

Bootstrap 4 Pagination

Pin It on Pinterest

Share This