Bootstrap Pagination

In this tutorial you will learn how to create pagination with Bootstrap.

Creating Pagination with Bootstrap

Pagination is the process of organizing content by dividing it into separate pages.

Pagination is used in some or other form quite often in almost every web application, for instance it is used by search engines for displaying a limited number of results on search results pages, or showing a limited number of posts for every page on a blog or forum.

— 上面示例的输出将如下所示：

---

Pagination with Disabled and Active States

Links inside Bootstrap pagination can further be customized for different circumstances, like when user approaches to an end or start, or indicating current page number to the user. Use the class .disabled for making the links disabled and .active to indicate the current page.

— 上面示例的输出将如下所示：

---

Changing the Sizes of Pagination

You can also change the sizes of pagination to increase or decrease the clickable area.

Add the relative sizing classes like .pagination-lg, or .pagination-sm to the .pagination base class for creating larger or smaller pagination.

— 上面示例的输出将如下所示：

---

Bootstrap Pager

Sometimes you may simply require previous and next links on your website to provide simple and quick navigation to the user instead of the complex pagination as we discussed above.

This can be done using the Bootstrap class .pager.

— 上面示例的输出将如下所示：

---

Alignment of Pager

By default pager are aligned horizontally center but you align previous link to left and next link right using the class .previous and .next respectively.

— 上面示例的输出将如下所示：

You can also apply the same pagination classes .disabled and .active to the pager.

— 上面示例的输出将如下所示：