Bootstrap Pagination

Pagination links are customizable for different circumstances. Use .disabled for links that appear un-clickable and .active to indicate the current page.

If you have a web site with lots of pages, you may wish to add some sort of pagination to each page.

Basic Pagination

If you have a web site with lots of pages, you may wish to add some sort of pagination to each page.

To create a basic pagination, add the .pagination class to an <ul> element. Then add the .page-item to each <li> element and a .page-link class to each link inside <li>

Example:
<ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item">lt;a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#"></a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

Active State

The .active class is used to "highlight" the current page:

Example:
<ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

Disable State

The .disabled state

Example:
<ul class="pagination"> <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

Pagination Sizing

Pagination blocks can also be sized to a larger or a smaller size:

Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks:

Example:
<ul class="pagination pagination-lg> <li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

<ul class="pagination pagination-sm> <li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

Pagination Alignment

Use utility classes to change the alignment of the pagination:

<ul class="pagination" style="margin:20px 0">
<li class="page-item">...</li>
</ul>

<ul class="pagination justify-content-center" style="margin:20px 0">
<li class="page-item">...</li>
</ul>

<ul class="pagination justify-content-end" style="margin:20px 0">
<li class="page-item">...</li>
</ul>

Key points of Bootstrap pagination

1. Basic Structure

• Bootstrap provides a simple HTML structure for pagination, using the <ul class="pagination"> element to create a series of page links.
• Each page link is an <li class="page-item"> with an <a class="page-link"> anchor tag.

2. Active and Disabled States

• Add .active to the <li class="page-item"> for the currently active page.
• Add .disabled to disable specific links.

3. Size options

• Adjust the size of the pagination by adding .pagination-lg or .pagination-sm for larger or smaller page buttons, respectively.

4. Alignment

• By default, pagination is left-aligned. Center it by wrapping it in a <div class="d-flex justify-content-center">.
• Right-align with <div class="d-flex justify-content-end">.

5. Icons in Pagination

• Use icons or labels like "Previous" and "Next" to improve navigation. Bootstrap Icons or Font Awesome icons can be included for this.

6. Accessibility

• Ensure accessibility by using ARIA attributes (aria-label, aria-current) and descriptive text or icons for navigation controls.

7. JavaScript for Dynamic Pagination

• For dynamic pagination (i.e., changing pages without a full-page reload), you can integrate JavaScript or jQuery to handle content updates based on the selected page.