This basic Bootstrap lesson will discuss pagination. Bootstrap 5 handles out-of-order lists, just like many other UI elements.
This basic Bootstrap lesson will discuss pagination. Bootstrap 5 handles out-of-order lists, just like many other UI elements.
Pagination in Bootstrap 5
The following table lists the classes that Bootstrap provides for pagination:
.pagination
Description: Add this class for pagination on a website.
Sample code:
- «
- 1
..
.disabled, .active
Description: Customize links .disalbedfor non-clickable links and .activefor the current page.
- «
- 1(current)
..
.pagination-lg, .pagination-sm
Description: Use these classes for items of different sizes.
Sample code:
. . .
Basic pagination
If you have a website with many different pages, you might want to add some pagination to each page.
To create basic pagination, add the `.pagination` class to an element.
Then, add .page-item to each tag.
- and a class
.page-linkinto each link inside - :
For example:
Bootstrap Example Pagination
To create basic pagination, add the `.pagination` class to a `ul` element. Then, add `.page-item` to each `li` tag and a `.page-link` class to each link inside the `li` tag.
- previous
- 1
- 2
- 3
- Next
Operating status
The class .activeis used to highlight the current page:
For example:
Bootstrap Example Paging - Operating Status
Add the class .active to let users know which page of TipsMake.com they are currently on:
- previous
- 1
- 2
- 3
- Next
Disabled state
Classes .disableare used for pages that cannot be clicked. For example:
Bootstrap Example TipsMake.com pagination - Inactive status
Add the `.disabled` class to the disabled equipment:
- previous
- 1
- 2
- 3
- Next
Paging size
Pagination blocks in Bootstrap 5 can also be resized to be larger or smaller. Add .pagination-lgto make the block larger or .pagination-smto make it smaller. For example:
Bootstrap Example Pagination block size on TipsMake.com
Add .pagination-lg for larger blocks or .pagination-sm for smaller blocks.
Small:
- previous
- 1
- 2
- 3
- Next
Default:
- previous
- 1
- 2
- 3
- Next
Small:
- previous
- 1
- 2
- 3
- Next
Adjust pagination margins
Use utility classes to change pagination margins in Bootstrap 5. For example:
Bootstrap Example Page margins on TipsMake.com.com
Use utility classes to change pagination margins:
- previous
- 1
- 2
- Next
- previous
- 1
- 2
- Next
- previous
- 1
- 2
- Next
Breadcrumbs
Breadcrumbs are a special form of pagination, a collection of links that help users determine their relative position within the page structure. The class .breadcrumbindicates .breadcrumb-itemthe current page position in the navigation hierarchy. For example:
Bootstrap Example Breadcrumbs
The classes .breadcrumb and .breadcrumb-item specify the current page position in the navigation hierarchy on TipsMake.com:
Above is everything you need to know about pagination methods in Bootstrap 5. You can apply many of the above pagination styles to your website according to your needs and development goals.