Bootstrap 5 Pagination

Bootstrap 5 Pagination

Bootstrap 5 pagination is the process of displaying limited number of result on the every page. It enhances website performance as well as it appearance.

Example:

Steps to create bootstrap 5 pagination:

  • Wrap unordered list inside <nav> element base class.
  • Assign .pagination to <ul> element base class.
  • Assign .page-item to <li> element base class.
  • Assign .page-link to every <a> element base class.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Simple Pagination

Code Explanation

Note:Follow the above mention steps to create simple bootstrap pagination.

Pagination:Active State

To highlight the current page use .active to the list item <li> element base class.

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Pagination: Active Page Item

Code Explanation

Note: To make an active page item, assign .active to the page item base class.

Pagination: Disabled State

To disable any page item, you have to add .disabled class to any page item <li> element base class.

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Pagination:Disabled Item

Code Explanation

Note: To make a disabled page item, assign .disabled to the page item(<li>) base class.

Pagination : Active & Disabled

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Pagination:Active/Disabled Item

Code Explanation

Note:To make an active & disabled page item, assign .active & .disabled to the page item(<li>) base class respectively.

Pagination Sizing

Steps to assign pagination size:

  • To create smaller pagination use .pagination-sm to unordered list <ul> element base class.
  • To create larger pagination use .pagination-lg to unordered list <ul>

Smaller Pagination

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Pagination:Smaller Size

Code Explanation

Note: Please keep in mind that,pagination size can be controlled by .pagination-sm & .pagination-lg.To create small pagination item assign.pagination-sm to the pagination container base class .

Pagination:Large Size

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Pagination:Large Size

Code Explanation

Note: Please keep in mind that, to create a large paginated item assign .pagination-lg to the pagination container base class.

Pagination Alignment

Pagination alignment can be done easily by flexbox utilities classes.

To change pagination alignment,add flexbox utility classes inside unordered list container(<ul>) base class.

Pagination:Left Alignment

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Pagination:Alignment

Code Explanation

Note: Please keep in mind that, the paginated item is by default left-aligned.

Pagination:Center Alignment

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Pagination:Alignment

Code Explanation

Note: Paginated items can be aligned horizontally center by providing .justify-content-center to the <ul> element base class.

Pagination:Right Alignment

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Pagination:Right Alignment

Code Explanation

Note: Paginated items can be aligned right by providing .justify-content-end to the <ul> element base class.

Online Test / Quiz