Pagination in Bootstrap, how to create and use


The pagination (or pagination) in Bootstrap basically means breaking up website content into subpages. Refer to the following article of Taimienphi.vn to learn in detail how to create Pagination in Bootstrap.


In the previous lesson, Taimienphi.vn showed you how to create Breadcrumb in Bootstrap. In the next lesson below, Taimienphi.vn will guide you on how to create pagination in Bootstrap.

Table of Contents:
1. Create Pagination (pagination) in Bootstrap
2. Customize the disable / active status for paging links
3. Change paging size in Bootstrap
4. Aligning the pagination in Bootstrap

1. Create Pagination (pagination) in Bootstrap

As Taimienphi.vn mentioned above, Pagination (paging) in Bootstrap is the division of website content into subpages.

Most web applications use paging, such as search engines that use paging to display a limited number of search results on search results pages or to limit the number of posts on. every page on blog or forum.

For example: The following example illustrates how to create a pagination in Bootstrap:

pagination in bootstrap

The output will look like the following:

pagination in bootstrap 2

2. Customize the disable / active status for paging links

We can customize the links (links) in paging for different cases, so that users can imagine which pages they are currently visiting.

By using class .disabled to create interfaces that look like disabled, unreachable, and layered forms .active to display is the current page visited by the user.

For example: In the following example we customize the disabled / active state for paging links using the disabled and active classes:

pagination in bootstrap 3

The output will look like the following:

pagination in bootstrap 4

Note: Class .disabled Only show links when disabled and not remove mouse click function. To do this, we replace the active or disabled anchor links with the span, see the example below:

pagination in bootstrap 5

The output will look like the following:

pagination in bootstrap 6

3. Change paging size in Bootstrap

We can also change paging size to increase or decrease the size of the clickable area.

Using relative size classes like .pagination-lg or .pagination-sm go to class .pagination to create a larger or smaller paging page.

For example: The following example illustrates how to change paging size in Bootstrap:

pagination in bootstrap 7

The output will look like the following:

pagination in bootstrap 8

4. Aligning the pagination in Bootstrap

The default paging in Bootstrap is horizontally aligned to the left. To align the center paging, we add a class .justify-content-center go to class .pagination as in the example below:

pagination in bootstrap 9

The output will look like the following:

pagination in bootstrap 10

Similarly, we can use class .justify-content-end to align the page horizontally to the right as in the example below:

pagination in bootstrap 11

The output will look like the following:

pagination in bootstrap 12

The article above Taimienphi.vn has shown you how to create pagination (pagination) in Bootstrap. In addition, if you have any questions or questions, you can leave your comments in the comment section below the article.

https://thuthuat.taimienphi.vn/pagination-in-bootstrap-51128n.aspx
In the next lesson, Taimienphi.vn will introduce you further Badge in Bootstrap.

.

Add a Comment

Your email address will not be published. Required fields are marked *