Bootstrap Pagination

Bootstrap is also giving support of pagination feature for you site or app with the multi-page pagination, in this tutorial we will discuss about that. Bootstrap is handling an unordered list for pagination with a lot of interface elements.


The following listed classes are handling pagination feature which Boostrap provides.


Add this class in <ul> tag to get the pagination on your page.

.disabled, .active

By using .disabled for unclickable links and .active to indicate the current page you can customize links.

.pagination-lg, .pagination-sm

Add these classes to get different size items.

Default Pagination

Follow the below code to make pagination. Use class .pagination as we have discussed above. The large block is hard to miss, easily scalable, and provides large click areas.

Disabled and active states

Use .disabled for unclickable links and .active to indicate the current page to customize links as above mentioned.


For use fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes as we discussed in the above.


If you want to make simple pagination links like “previous and next” with light markup and styles. This is great for simple sites like magazines and blogs. This pagination links will work in an unordered list, by default links are center aligned. Below we are summarizing the classes Bootstrap provides for pager.


Add this class in <ul> tag to get the pager links.

.previous, .next

Assign the class .previous to make align left and class .next to make align right the links.


Use this class to get a disabled look.

Default Pager

By default, the pager centers links. Following example demonstrates the use of class .pager discussed above:

Aligned Links

Alternatively, you can align each link to the sides to use of classes for alignment, .previous, .next discussed as above mentioned:

Disable States

In the following example you can see that pager links also use the general .disabled utility class from the pagination as we have discussed above.

Leave a Reply

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