Pagination

The .pagination class provides pagination links:

• chevron_left
• 1
• 2
• 3
• 4
• 5
• chevron_right

<ul class="pagination">
        <li><a href="#!"><i class="material-icons">chevron_left</i></a></li>
        <li><a href="#">1</a></li>
        <li class="active"><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#!"><i class="material-icons">chevron_right</i></a></li>
    </ul>  

Pagination - Circle Active State

Add class .pag-circle to make circle active state

• chevron_left
• 1
• 2
• 3
• 4
• 5
• chevron_right

<ul class="pagination pag-circle">
        <li><a href="#!"><i class="material-icons">chevron_left</i></a></li>
        <li><a href="#">1</a></li>
        <li class="active"><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#!"><i class="material-icons">chevron_right</i></a></li>
    </ul>  

Pagination - Disabled State

Add class .disabled if a page for some reason is disabled:

• 1
• 2
• 3
• 4
• 5

<ul class="pagination">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li class="disabled"><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul>  

Pagination - Sizing

Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks:

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5