Note: The planet UI design system is an extension of the bootstrap framework. Please also referer to the bootstrap documentation for best pratices while using the framework.

Pagination

Basic list pagination

1 to 20 of 86

<div class="pagination-container">
    <span class="me-2">
        <span  class="dropright">
            <a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">1 to 20</a>        
            <div class="dropdown-menu">
                <a class="dropdown-item text-primary" href="#">Show 10 rows</a>
                <a class="dropdown-item text-primary" href="#">Show 20 rows</a>
                <a class="dropdown-item text-primary" href="#">Show 50 rows</a>
                <a class="dropdown-item text-primary" href="#">Show 100 rows</a>
            </div>
        </span> of 86
    </span>
    <a href="#"><i class="fa fa-lg planet-ds-icon-angle-first"></i></a> 
    <a href="#"><i class="fa fa-lg planet-ds-icon-angle-left"></i></a> 
    <a href="#"><i class="fa fa-lg planet-ds-icon-angle-right"></i></a>
    <a href="#"><i class="fa fa-lg planet-ds-icon-angle-last"></i></a>
</div>

Single page disabled state

1 to 20 of 86

<div class="pagination-container">
    <span class="me-2">
        <span class="dropright">
            <a href="#" class="disabled" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">1 to 20</a>        
            <div class="dropdown-menu">
                <a class="dropdown-item text-primary" href="#">Show 10 rows</a>
                <a class="dropdown-item text-primary" href="#">Show 20 rows</a>
                <a class="dropdown-item text-primary" href="#">Show 50 rows</a>
                <a class="dropdown-item text-primary" href="#">Show 100 rows</a>
            </div>
        </span> of 86
    </span>
    <a class="disabled" href="#"><i class="fa fa-lg planet-ds-icon-angle-first"></i></a> 
    <a class="disabled" href="#"><i class="fa fa-lg planet-ds-icon-angle-left"></i></a> 
    <a class="disabled" href="#"><i class="fa fa-lg planet-ds-icon-angle-right"></i></a>
    <a class="disabled" href="#"><i class="fa fa-lg planet-ds-icon-angle-last"></i></a>
</div>