Home ยป Bootstrap Pagination

Bootstrap Pagination

by

Bootstrap Pagination

Pagination is used to sort the web pages of your website in an organized manner. It becomes very necessary if your website has a lot of web pages.

Following is a list of classes that Bootstrap provides to handle pagination.

Table:

ClassDescription
.paginationAdd this class to get the pagination on your page.
.disabled,
.active
you can customize links by using .disabled for unclickable links and .active to indicate the current page.
.pagination-lg,
.pagination-sm
use these classes to get different size items.

Bootstrap Pagination Example

Add the .pagination class to an <ul> element to create a basic pagination.

See this example:

Test it Now


Bootstrap Active State

The active state specifies the current page on which user is active.

The class .active is used to specify active state.

See this example:

Test it Now


Bootstrap Disabled State

The disabled state specifies that you cannot click on the link.

Add class .disabled to disable the links you don't need more.

See this example:

Test it Now


Bootstrap Pagination Sizing

You can also size pagination blocks larger or smaller accordingly.

Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks.

See this example:

Test it Now


Bootstrap Breadcrumbs

It is another form of pagination. It indicates the current page's location within a navigational hierarchy.

The .breadcrumb class is used to create breadcrumbs.

See this example:

Test it Now

Next TopicBootstrap Pager

You may also like