YouTip

This chapter will explain the pagination feature supported by Bootstrap. Pagination is an unordered list, and Bootstrap handles pagination in the same way it handles other interface elements. ## Pagination The following table lists the classes provided by Bootstrap for handling pagination. | Class | Description | Example Code | | --- | --- | --- | | .pagination | Add this class to display pagination on the page. |

• «
• 1
.......

| | .disabled, .active | You can customize links by using **.disabled** to define non-clickable links and using **.active** to indicate the current page. |

• «
• 1(current)
.......

| | .pagination-lg, .pagination-sm | Use these classes to get different sized items. |

...

...

...

| ### Default Pagination The following example demonstrates the usage of the class **.pagination** discussed in the table above: ## Example

• «
• 1
• 2
• 3
• 4
• 5
• »

[Try it »](#) The result is as follows:  ### Pagination States The following example demonstrates the usage of the classes **.disabled, .active** discussed in the table above: ## Example

• «
• 1
• 2
• 3
• 4
• 5
• »

[Try it »](#) The result is as follows:  ### Pagination Sizes The following example demonstrates the usage of the classes **.pagination-*** discussed in the table above: ## Example

• «
• 1
• 2
• 3
• 4
• 5
• »

• «
• 1
• 2
• 3
• 4
• 5
• »

• «
• 1
• 2
• 3
• 4
• 5
• »

[Try it »](#) The result is as follows:  ## Pager If you want to create simple pagination links to provide navigation for users, you can use the pager. Like pagination links, the pager is also an unordered list. By default, the links are centered. The following table lists the classes provided by Bootstrap for handling the pager. | Class | Description | Example Code | | --- | --- | --- | | .pager | Add this class to get pager links. |

• Previous
• Next

| | .previous, .next | Use the class **.previous** to align links to the left, and use **.next** to align links to the right. |

• ← Older
• Newer →

| | .disabled | Add this class to disable the corresponding button. |

• ← Older
• Newer →

| ### Default Pager The following example demonstrates the usage of the class **.pager** discussed in the table above: ## Example

• Previous
• Next

[Try it »](#) The result is as follows:  ### Aligned Links The following example demonstrates the usage of the classes **.previous, .next** discussed in the table above: ## Example

• ← Older
• Newer →

[Try it »](#) The result is as follows:  ### Pager States The following example demonstrates the usage of the class **.disabled** discussed in the table above: ## Example

• ← Older
• Newer →

[Try it »](#) The result is as follows:  * * * ## More Pagination Examples | Class | Description | Example | | --- | --- | --- | | .pager | Simple pagination links, centered. | (#) | | .previous | Previous page button style in .pager, left-aligned. | (#) | | .next | Next page button style in .pager, right-aligned. | (#) | | .disabled | Disabled link. | (#) | | .pagination | Pagination links. | (#) | | .pagination-lg | Larger pagination links. | (#) | | .pagination-sm | Smaller pagination links. | (#) | | .disabled | Disabled link. | (#) | | .active | Current page link style. | (#) |