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.

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.

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.