Lesson 15: Pagination in Bootstrap 5

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. «
2. 1

..

.disabled, .active

Description: Customize links .disalbedfor non-clickable links and .activefor the current page.

1. «
2. 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.

1. and a class .page-linkinto each link inside
2. :

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.

1. previous
2. 1
3. 2
4. 3
5. 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:

1. previous
2. 1
3. 2
4. 3
5. 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:

1. previous
2. 1
3. 2
4. 3
5. 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:

1. previous
2. 1
3. 2
4. 3
5. Next

Default:

1. previous
2. 1
3. 2
4. 3
5. Next

Small:

1. previous
2. 1
3. 2
4. 3
5. 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:

1. previous
2. 1
3. 2
4. Next

1. previous
2. 1
3. 2
4. Next

1. previous
2. 1
3. 2
4. 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:

1. Photos
2. Summer 2017
3. Italy
4. Rome

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.