Bootstrap Pagination

Bootstrap pagination is the simplest way of creating pagination for your website pages. If you have large size content and you want to arrange them in separate pages, you can use pagination.

Almost every website requires pagination to organize its content in the managed way. If you are using the Search Engines like Google, You can see pagination for the search website links. To see more content on a page, you have to click the next pagination link.

If you are running a blog, you can see a list of blog posts with pagination.

Create Bootstrap Pagination

Bootstrap pagination requires an only class .pagination to add to the <ul> tag.

Test it Live

Output

The above example contains several links to pagination if you want to see more content on a website you can click each links one-by-one.

Change the Navigational States to Active/Disabled

Showing pagination links on your website need different navigational states. Suppose, if you click a pagination link and your current location is page no 9. You will have to make 9 as the current active pagination link by using the class .active.

Sometimes, you also need your users to not to visit on some pages. In that situation, you can make it disabled by using the class .disabled.

Test it Live

Output

In the above example, the active link has primary as a background color. The first link is the disabled link which does not allow users to click on it. You can hover over the link and check if it allows you to click on the link or not.

Change the Size of Pagination

Bootstrap pagination comes with three class .pagination-lg, .pagination-md and .pagination-sm. You can use these classes to change the size of pagination as per your need.

Test it Live

Output

Create Bootstrap Pager

If you have ever visited any blog posts, you may see a next and previous links there. These links are called pager links which you can click to visit the next and previous pages of your website.

To create a pager, you have to use the class .pager as the class of the <ul> tag with two list items previous and next links.

Test it Live

Output

Align Bootstrap Pager

You can also align the above-created pager by using the class .previous as the of the previous link and class .next as the class of the next link.

The class .previous aligns to the left side and class .next aligns to the right side.

Test it Live

Output

Disable state of Pager

You can disable the pager links by using the class .disabled as the class of the disabled pager link.

Test it Live

Output