Home » Bootstrap 5 Pagination

Bootstrap 5 Pagination

by Online Tutorials Library

Bootstrap 5 Pagination

Bootstrap 5 List class and HTML elements are used for pagination so that screen readers may announce the number of available links. Use a bootstrap 5 classes in the <div> element to indicate to screen readers and other assistive technology that it is a pagination section. The pagination function shows the active page link before and next pages in the application. The pagination works for large web applications, eCommerce websites, and tutorial websites for linking multiple pages.

Basic pagination

Bootstrap5 pagination function uses the “pagination” class inside of the div tag. The bootstrap uses list tag such as a <ul> and <li> for linking pages. The <li> and <a> tag uses the “page-item” and “page-link” classes respectively. The <li> tag uses the anchor element to place require link in the list value.

Syntax

The following syntax shows how to create pagination using bootstrap 5 classes.

Examples

The following example shows basic pagination using bootstrap 5 classes. here, we can link before display page, after page, and available display pages link.

Output

The following image shows the basic pagination output for the web page.

Bootstrap 5 Pagination

Active Pagination

The pagination function uses the “pagination” class inside the div tag with the list function. The <li> tag of list function uses the “page-item” with the “active” class.

Syntax

The following syntax shows active pagination using bootstrap 5 classes in web page.

Example

The following example shows active pagination using bootstrap 5 classes. the “5” page value uses the “active” class. In the web application, active page changes as per display page.

Output

The following image shows the Active pagination output for the web page.

Bootstrap 5 Pagination

Disabled Pagination

Bootstrap 5 pagination function uses the “pagination” class inside of the div tag with list function. The <li> tag of list function uses the “page-item” with the “disabled” class.

Syntax

The following syntax shows disabled pagination using bootstrap 5 classes in web page.

Example

The following example shows disabled pagination using bootstrap 5 classes. we use disabled class in the last link of the pagination.

Output

The following image shows disabled pagination output for the web page.

Bootstrap 5 Pagination

Pagination Size

The pagination function uses the “pagination”, “page-item” and “page-link” classes inside of the div tag. Bootstrap 5 pagination displays with the required size, such as large and small. The size class comes with the “pagination” class.

Syntax

The following syntax shows pagination size using bootstrap 5 classes in web page.

Example

The following example shows disabled pagination using bootstrap 5 classes. we can use large and small size pagination.

Output

The following image shows the different sizes of the pagination output for a web page.

Bootstrap 5 Pagination

Alignment of Pagination

The pagination function uses the “pagination” with alignment classes inside the <ul> tag. Bootstrap 5 pagination displays with the required alignment, such as a start, center, and end. The pagination does not require any class to display the start point of the page. The web page displays left-aligned pagination by default, but the center and right-aligned pagination require the bootstrap 5 alignment class.

Syntax

The following syntax shows center alignment pagination using bootstrap 5 classes.

The following syntax shows end alignment pagination using bootstrap 5 classes.

Example

The following example shows pagination alignment using bootstrap 5 classes. we can see pagination function in a starting point, center and end point of the page.

Output

The following image shows a different alignment of the pagination output for the web page.

Bootstrap 5 Pagination

Breadcrumb pagination

Bootstrap5 pagination function uses the “breadcrumb” class inside of the <ul> tag. The bootstrap uses list tag such as a <li> and <a> for linking pages. The list tags such as a <li> use the “breadcrumb-item” class.

Syntax

The following syntax shows how to create breadcrumb pagination using bootstrap 5 classes.

Examples

The following example shows breadcrumb pagination using bootstrap 5 classes. We can link different values in breadcrumb format. The pagination uses sliding line between two values to differentiate values.

Output

The following image shows the basic pagination output for the web page.

Bootstrap 5 Pagination

Conclusion

The pagination uses for linking different and multiple pages on one page for user interaction. It displays how many pages are available to show the user required information. It is a small, user-friendly, and usable function for large-size web applications.


You may also like