logologo-dark

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
Direction Change
LTR Mode
RTL Mode
Main UI Style
Default
Shady
Sidebar Style
White
Light
Dark
Theme
Header Style
White
Light
Dark
Theme
Primary Skin
Default
Blue Light
Egyptian
Purple
Green
Red
Skin Mode
Light Skin
Dark Skin
Looking for functional script for Investment Platform? Check out
Investorm
Looking for Advanced
Investment Platform?