Pagination

Render previous, numbered, ellipsis, and next links for paged result sets with accessible labels, active and disabled states, sizing, and alignment.

Overview

The helper renders the outer navigation landmark and pagination list. Provide a specific aria-label when a page has more than one pager so assistive technology can distinguish each navigation region.

aspnet 

<bs-pagination infer-ellipses="false" aria-label="Search results pages">
    <bs-pagination-prev href="#" rel="prev">Previous</bs-pagination-prev>
    <bs-pagination-link index="1" href="#">1</bs-pagination-link>
    <bs-pagination-link index="2" href="#">2</bs-pagination-link>
    <bs-pagination-link index="3" href="#">3</bs-pagination-link>
    <bs-pagination-next href="#" rel="next">Next</bs-pagination-next>
</bs-pagination>

Working with icons

When using symbols instead of words, include hidden text and an explicit accessible label so assistive technology can announce previous and next controls clearly.

aspnet 

<bs-pagination infer-ellipses="false" aria-label="Icon pagination example">
    <bs-pagination-prev href="#" rel="prev" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        <bs-span screen-reader-visibility="VisuallyHidden">Previous</bs-span>
    </bs-pagination-prev>
    <bs-pagination-link index="1" href="#">1</bs-pagination-link>
    <bs-pagination-link index="2" href="#">2</bs-pagination-link>
    <bs-pagination-link index="3" href="#">3</bs-pagination-link>
    <bs-pagination-next href="#" rel="next" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        <bs-span screen-reader-visibility="VisuallyHidden">Next</bs-span>
    </bs-pagination-next>
</bs-pagination>

Active

Set active="true" on the current page. The active page should also communicate its current-page state with aria-current when the helper or the calling markup provides it.

aspnet 

<bs-pagination infer-ellipses="false" aria-label="Active and disabled pagination example">
    <bs-pagination-prev href="#" disabled="true" rel="prev">Previous</bs-pagination-prev>
    <bs-pagination-link index="1" href="#" active="true">1</bs-pagination-link>
    <bs-pagination-link index="2" href="#">2</bs-pagination-link>
    <bs-pagination-link index="3" href="#">3</bs-pagination-link>
    <bs-pagination-next href="#" rel="next">Next</bs-pagination-next>
</bs-pagination>

Disabled

Disabled pagination controls render with Bootstrap disabled state and should not be used for reachable destinations. Anchor-style disabled controls are visually and pointer-disabled by CSS, so prevent keyboard activation in application behavior or render a non-link control when the destination must be truly unavailable.

aspnet 

<bs-pagination infer-ellipses="false" aria-label="Disabled pagination example">
    <bs-pagination-prev href="#" disabled="true" rel="prev">Previous</bs-pagination-prev>
    <bs-pagination-link index="1" href="#">1</bs-pagination-link>
    <bs-pagination-link index="2" href="#" disabled="true">2</bs-pagination-link>
    <bs-pagination-link index="3" href="#">3</bs-pagination-link>
    <bs-pagination-next href="#" rel="next">Next</bs-pagination-next>
</bs-pagination>

Inferred ellipses

When indexed links have gaps and infer-ellipses is enabled, the helper inserts disabled ellipsis items.

aspnet 

<bs-pagination infer-ellipses="true" aria-label="Long range pagination example">
    <bs-pagination-prev href="#" rel="prev">Previous</bs-pagination-prev>
    <bs-pagination-link index="1" href="#">1</bs-pagination-link>
    <bs-pagination-link index="2" href="#">2</bs-pagination-link>
    <bs-pagination-link index="8" href="#" active="true">8</bs-pagination-link>
    <bs-pagination-link index="20" href="#">20</bs-pagination-link>
    <bs-pagination-next href="#" rel="next">Next</bs-pagination-next>
</bs-pagination>

Sizing

Use the pagination size attribute on the pagination container. Sizing applies to the whole pager instead of individual page links.

aspnet 

<bs-pagination infer-ellipses="false" pagination-size="Large" aria-label="Large pagination example" bottom-margin="Default3">
    <bs-pagination-prev href="#" rel="prev">Previous</bs-pagination-prev>
    <bs-pagination-link index="1" href="#">1</bs-pagination-link>
    <bs-pagination-link index="2" href="#" active="true">2</bs-pagination-link>
    <bs-pagination-next href="#" rel="next">Next</bs-pagination-next>
</bs-pagination>
<bs-pagination infer-ellipses="false" pagination-size="Small" aria-label="Small pagination example">
    <bs-pagination-prev href="#" rel="prev">Previous</bs-pagination-prev>
    <bs-pagination-link index="1" href="#">1</bs-pagination-link>
    <bs-pagination-link index="2" href="#" active="true">2</bs-pagination-link>
    <bs-pagination-next href="#" rel="next">Next</bs-pagination-next>
</bs-pagination>

Alignment

Use BCL flex display and justification attributes on the pagination container for centered or end-aligned pagination.

aspnet 

<bs-pagination infer-ellipses="false" display="Flex" justify-content="Center" aria-label="Centered pagination example" bottom-margin="Default3">
    <bs-pagination-prev href="#" rel="prev">Previous</bs-pagination-prev>
    <bs-pagination-link index="1" href="#">1</bs-pagination-link>
    <bs-pagination-link index="2" href="#" active="true">2</bs-pagination-link>
    <bs-pagination-next href="#" rel="next">Next</bs-pagination-next>
</bs-pagination>
<bs-pagination infer-ellipses="false" display="Flex" justify-content="End" aria-label="End aligned pagination example">
    <bs-pagination-prev href="#" rel="prev">Previous</bs-pagination-prev>
    <bs-pagination-link index="1" href="#">1</bs-pagination-link>
    <bs-pagination-link index="2" href="#" active="true">2</bs-pagination-link>
    <bs-pagination-next href="#" rel="next">Next</bs-pagination-next>
</bs-pagination>

CSS variables

Bootstrap exposes pagination CSS variables for item spacing, colors, borders, focus shadows, active state, and disabled state. BCL emits the Bootstrap pagination structure; theme-level styling remains a stylesheet concern.

Sass variables

Bootstrap's Sass variables define the default pagination dimensions and state colors before they become runtime CSS variables.

Sass mixins

Bootstrap uses Sass mixins to generate the standard large and small pagination sizes. Use pagination-size on bs-pagination for those typed size variants.