Pagination

Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.

Bootstrap uses a large block of connected links for pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with <ol> DITA elements so screen readers can announce the number of available links. They are wrapped in an HTML <nav> element to identify them as a navigation sections to screen readers and other assistive technologies.

In addition, as pages likely have more than one such navigation section, it’s advisable to provide a descriptive aria-label by placing the <ol> within a dedicated <section> with a <title> for the <nav> to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate <title> could be "Search results pages".

<pagination>
  <title>Page navigation example</title>
  <ol>
    <li><xref href="#">Previous</xref></li>
    <li><xref href="#">1</xref></li>
    <li><xref href="#">2</xref></li>
    <li><xref href="#">3</xref></li>
    <li><xref href="#">Next</xref></li>
  </ol>
</pagination>

<section>
  <title>Page navigation example</title>
  <ol outputclass="pagination">
    <li><xref href="#">Previous</xref></li>
    <li><xref href="#">1</xref></li>
    <li><xref href="#">2</xref></li>
    <li><xref href="#">3</xref></li>
    <li><xref href="#">Next</xref></li>
  </ol>
</section>

Sizing

Fancy larger or smaller pagination? Use @size="large" or @size="small" for additional sizes.

<pagination size="large">
  <title>Page navigation example</title>
  <ol>
    <li><xref href="#">Previous</xref></li>
    <li><xref href="#">1</xref></li>
    <li><xref href="#">2</xref></li>
    <li><xref href="#">3</xref></li>
    <li><xref href="#">Next</xref></li>
  </ol>
</pagination>

<section>
  <title>Page navigation example</title>
  <ol outputclass="pagination pagination-lg">
    <li><xref href="#">Previous</xref></li>
    <li><xref href="#">1</xref></li>
    <li><xref href="#">2</xref></li>
    <li><xref href="#">3</xref></li>
    <li><xref href="#">Next</xref></li>
  </ol>
</section>

<pagination size="small">
  <title>Page navigation example</title>
  <ol>
    <li><xref href="#">Previous</xref></li>
    <li><xref href="#">1</xref></li>
    <li><xref href="#">2</xref></li>
    <li><xref href="#">3</xref></li>
    <li><xref href="#">Next</xref></li>
  </ol>
</pagination>

<section>
  <title>Page navigation example</title>
  <ol outputclass="pagination pagination-sm">
    <li><xref href="#">Previous</xref></li>
    <li><xref href="#">1</xref></li>
    <li><xref href="#">2</xref></li>
    <li><xref href="#">3</xref></li>
    <li><xref href="#">Next</xref></li>
  </ol>
</section>

Alignment

Change the alignment of pagination component by appending Bootstrap flexbox utility classes to the @outputclass

<pagination outputclass="justify-content-center">
  <title>Page navigation example</title>
  <ol>
    <li><xref href="#">Previous</xref></li>
    <li><xref href="#">1</xref></li>
    <li><xref href="#">2</xref></li>
    <li><xref href="#">3</xref></li>
    <li><xref href="#">Next</xref></li>
  </ol>
</pagination>

<section>
  <title>Page navigation example</title>
  <ol outputclass="pagination justify-content-center">
    <li><xref href="#">Previous</xref></li>
    <li><xref href="#">1</xref></li>
    <li><xref href="#">2</xref></li>
    <li><xref href="#">3</xref></li>
    <li><xref href="#">Next</xref></li>
  </ol>
</section>

<pagination outputclass="justify-content-end">
  <title>Page navigation example</title>
  <ol>
    <li><xref href="#">Previous</xref></li>
    <li><xref href="#">1</xref></li>
    <li><xref href="#">2</xref></li>
    <li><xref href="#">3</xref></li>
    <li><xref href="#">Next</xref></li>
  </ol>
</pagination>

<section>
  <title>Page navigation example</title>
  <ol outputclass="pagination justify-content-end">
    <li><xref href="#">Previous</xref></li>
    <li><xref href="#">1</xref></li>
    <li><xref href="#">2</xref></li>
    <li><xref href="#">3</xref></li>
    <li><xref href="#">Next</xref></li>
  </ol>
</section>