Buzzer
buzzerlogo
Documentation Mega Download
RB
Nathan pushed new commit in github.
10 minutes ago
Alice started new task: buzzerUI design.
1 hour ago
Rose deployed new version of NodeJS REST
2 hours ago
 RB
Alice started new task: buzzerUI design.
1 hour ago
Rose deployed new version of NodeJS REST
2 hours ago
Mark all as read
Jane Pearson Administrator
Profile Settings 6 Inbox Message
Need help? Sign out

Subscribe

Accordion

  • Lorem ipsum

    Lorem ipsum dolor sit amet, elit. Placeat, quibusdam! Voluptate nobis

  • Dolor sit amet

    Lorem ipsum dolor sit amet, consectetur adipisicing Voluptate nobis

Company

Image Gallery

img
img
img

Documentation

Visitors
2,5,1,8,3,6,7,5
Visits
10,8,9,3,5,8,5
Chats
1,8,5,6,2,4,3,2
Introduction
Alerts Avatars Buttons Breadcrumb Input group List group Modal Pagination Colors Cards Charts Form components Tags Typography
Browse Portfolio

Pagination

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

<nav aria-label="Page navigation 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"><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>

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 and the .sr-only utility.

<nav aria-label="Page navigation example">
    <ul class="pagination">
        <li class="page-item">
        <a class="page-link" href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
            <span class="sr-only">Previous</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>
            <span class="sr-only">Next</span>
        </a>
        </li>
    </ul>
</nav>

Disabled and active states

<nav aria-label="...">
    <ul class="pagination">
        <li class="page-item disabled">
        <a class="page-link" href="#" tabindex="-1">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 <span class="sr-only">(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>

Alignment

Change the alignment of pagination components with flexbox utilities.

<nav aria-label="Page navigation example">
    <ul class="pagination justify-content-center">
        <li class="page-item disabled">
        <a class="page-link" href="#" tabindex="-1">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>
</nav>
<nav aria-label="Page navigation example">
    <ul class="pagination justify-content-end">
        <li class="page-item disabled">
        <a class="page-link" href="#" tabindex="-1">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>
</nav>