Pagination in Bootstrap 5

A pagination becomes a necessity if there are multiple web pages on your website because it helps a user to easily navigate through those pages and also makes the user aware of the page he/she is currently on. If you are designing your website using Bootstrap 5 and want to learn how to create and style a pagination using Bootstrap 5 then read the article till the end.

How to create a Pagination using Bootstrap 5

To make a pagination, assign the .pagination class to an unordered list, .page-item class to the list items and .page-link class to the link present inside each list item.

HTML

The above code generates a pagination showing numbering from 1 to 4 whereas &laquo and &raquo are entity names for left-pointing and right-pointing double angle quotation marks respectively. These entities help the user move the pagination numbering backward and forward.

Output

The output displays a basic pagination.

How to assign active and disabled states to a Pagination

The active state of a pagination shows the page the user is currently on, whereas, the disabled state makes a link unclickable and makes the user aware that there are no further pages to navigate.

HTML

The code snippet will create a pagination with the list item labeled “Back” being assigned the disabled state, meanwhile, the active state has been assigned to the list item labeled “4” which indicates that the user is currently on the fourth page.

Output

The active and disabled states were successfully assigned to the pagination.

How to scale a Pagination

If you wish to scale your pagination then use .pagination-sm class to create small sized paginations, whereas, use the .pagination-lg to generate large sized paginations.

HTML

The code above will generate both small and large sized paginations to demonstrate the comparison between sizes of both paginations.

Output

This is how you can scale your pagination.

How to set the alignment of a Pagination

A pagination by default is positioned at the left corner of a page, however, if you wish to place it at the center then use the .justify-content-center class, whereas, use the .justify-content-end to place it at the right corner of the page.

HTML

The above code uses the .justify-content-center class, therefore, the pagination created as a result will be placed at the center of the page.

Output

This is a center positioned pagination.

Now let’s position the pagination at the right corner of the page.

HTML

The code above uses the .justify-content-end class, hence the pagination will be placed at the end of the page.

Output

This is a right positioned pagination.

Conclusion

A pagination can be created by assigning the .pagination class to an unordered list, .page-item class to the list items and .page-link class to the link present inside each list item. If you wish to scale a pagination then make use of the .pagination-sm, and .pagination-lg classes. Furthermore, to align a pagination at the center or at the end of a page use the .justify-content-center, and .justify-content-end classes respectively. Lastly, you can also assign active and disbaled states to the pagination items.