Base

<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>
<nav aria-label="Page navigation example">
    <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#"><span data-feather="chevron-left" class="rui-icon rui-icon-stroke-1_5"></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="#"><span data-feather="chevron-right" class="rui-icon rui-icon-stroke-1_5"></span></a></li>
    </ul>
</nav>

Disabled and active states

<nav aria-label="Page navigation example">
    <ul class="pagination">
        <li class="page-item disabled"><a class="page-link" href="#"><span data-feather="chevron-left" class="rui-icon rui-icon-stroke-1_5"></span></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</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#"><span data-feather="chevron-right" class="rui-icon rui-icon-stroke-1_5"></span></a></li>
    </ul>
</nav>

Sizing

<nav aria-label="Page navigation example">
    <ul class="pagination pagination-lg">
        <li class="page-item active" aria-current="page">
            <span class="page-link">
                1
                <span class="sr-only">(current)</span>
            </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>
<nav aria-label="Page navigation example">
    <ul class="pagination pagination-sm">
        <li class="page-item active" aria-current="page">
            <span class="page-link">
                1
                <span class="sr-only">(current)</span>
            </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>

Messenger

Amber Smith

2 days ago
  • The last album.
  • I can’t open the last album!
10:19
  • Gues, I can’t open the last album...
10:20
Today
  • 123
10:29
  • Haha Amber! You are so nice! :smile:
10:30