Pagination

Examples for showing pagination to indicate a series of related content exists across multiple pages.

Basic Examples

The following example of basic pagination. Use .pagination class as parent <ul> and .page-link class of <a> element.

Code Example
<div><ul class="pagination">    <li class="page-item"><a class="page-link" href="#">Prev</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"><span class="page-link"><em class="icon ni ni-more-h"></em></span></li>    <li class="page-item"><a class="page-link" href="#">6</a></li>    <li class="page-item"><a class="page-link" href="#">7</a></li>    <li class="page-item"><a class="page-link" href="#">Next</a></li></ul></div>

Working with Icons

Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with aria attributes.

Code Example
<nav>    <ul class="pagination">        <li class="page-item">            <a class="page-link" href="#" aria-label="Prev"><span aria-hidden="true">&laquo;</span></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="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>        </li>    </ul></nav>

Disabled and Active States

Use .disabled for links that appear un-clickable and .active to indicate the current page.

Code Example
<nav>    <ul class="pagination">        <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">Prev</a></li>        <li class="page-item"><a class="page-link" href="#">1</a></li>        <li class="page-item active" aria-current="page"><a class="page-link" href="#">2 <span class="visually-hidden">(current)</span></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></nav>

Sizing

Add .pagination-{sm|lg|xl} with .pagination main class for additional sizes.

Code Example
<nav>    <ul class="pagination pagination-lg">      <li class="page-item active" aria-current="page"><span class="page-link">1</span></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>    </ul></nav>

Alignment

Change the alignment of pagination components with flexbox utilities as use .justify-content-{start|center|end} to set alignment.

Code Example
<nav>    <ul class="pagination justify-content-center">        <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">Prev</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></nav>
Switch Demo Layout
Use Case Concept
Preview Settings
Main UI Style
Default
Clean
Sidebar Style
White
Light
Dark
Theme
Primary Skin
Default
Blue
Egyptian
Purple
Green
Red
Looking for Coronavirus Real & Live Data Tracking Dashboard? Check out
CovStats
Looking for Coronavirus
Live Data Dashboard?