صفحه‌بندی

صفحه بندی پایه 
<nav aria-label="صفحه بندی پایه">
    <ul class="pagination mb-0">
        <li class="page-item disabled"><a class="page-link" href="javascript:void(0);">قبلی</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">بعدی</a></li>
    </ul>
</nav>
صفحه بندی با آیکون ها 
<nav aria-label="صفحه بندی با آیکون ها">
    <ul class="pagination mb-0">
        <li class="page-item">
            <a class="page-link" href="javascript:void(0);" aria-label="قبلی">
                <span aria-hidden="true"><i class="bx bx-chevron-left"></i></span>
            </a>
        </li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
        <li class="page-item">
            <a class="page-link" href="javascript:void(0);" aria-label="بعدی">
                <span aria-hidden="true"><i class="bx bx-chevron-right"></i></span>
            </a>
        </li>
    </ul>
</nav>
اندازه صفحه بندی 
<nav aria-label="...">
    <ul class="pagination pagination-sm mb-0">
        <li class="page-item active" aria-current="page">
            <span class="page-link">1</span>
        </li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
    </ul>
</nav>
<nav aria-label="...">
    <ul class="pagination mb-0">
        <li class="page-item active" aria-current="page">
            <span class="page-link">1</span>
        </li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
    </ul>
</nav>
<nav aria-label="...">
    <ul class="pagination pagination-lg mb-0">
        <li class="page-item active" aria-current="page">
            <span class="page-link">1</span>
        </li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
    </ul>
</nav>
حالت های فعال و غیرفعال 
<nav aria-label="..." class="me-3">
    <ul class="pagination">
        <li class="page-item disabled">
            <a class="page-link">قبلی</a>
        </li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
        <li class="page-item active" aria-current="page">
            <a class="page-link" href="javascript:void(0);">2</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="javascript:void(0);">بعدی</a>
        </li>
    </ul>
</nav>
<nav aria-label="...">
    <ul class="pagination">
        <li class="page-item disabled">
            <span class="page-link">قبلی</span>
        </li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
        <li class="page-item active" aria-current="page">
            <span class="page-link">2</span>
        </li>
        <li class="page-item">
            <a class="page-link" href="javascript:void(0);">بعدی</a>
        </li>
    </ul>
</nav>
صفحه‌بندی تراز وسط و راست 
<nav aria-label="پیمایش صفحه">
    <ul class="pagination justify-content-center">
        <li class="page-item disabled">
            <a class="page-link">قبلی</a>
        </li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
        <li class="page-item">
            <a class="page-link" href="javascript:void(0);">بعدی</a>
        </li>
    </ul>
</nav>
<nav aria-label="پیمایش صفحه">
    <ul class="pagination justify-content-end mb-0">
        <li class="page-item disabled">
            <a class="page-link">قبلی</a>
        </li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
        <li class="page-item">
            <a class="page-link" href="javascript:void(0);">بعدی</a>
        </li>
    </ul>
</nav>
سبک صفحه بندی-3 
<nav aria-label="پیمایش صفحه" class="pagination-style-3">
    <ul class="pagination mb-0 flex-wrap">
        <li class="page-item disabled">
            <a class="page-link" href="javascript:void(0);">
                قبلی
            </a>
        </li>
        <li class="page-item active"><a class="page-link" href="javascript:void(0);">1</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
        <li class="page-item">
            <a class="page-link" href="javascript:void(0);">
                <i class="bi bi-three-dots"></i>
            </a>
        </li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">16</a></li>
        <li class="page-item">
            <a class="page-link text-primary" href="javascript:void(0);">
                بعدی
            </a>
        </li>
    </ul>
</nav>
سبک صفحه بندی-4 
<nav aria-label="پیمایش صفحه" class="pagination-style-4">
    <ul class="pagination mb-0 flex-wrap">
        <li class="page-item disabled">
            <a class="page-link" href="javascript:void(0);">
                قبلی
            </a>
        </li>
        <li class="page-item active"><a class="page-link" href="javascript:void(0);">1</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
        <li class="page-item">
            <a class="page-link" href="javascript:void(0);">
                <i class="bi bi-three-dots"></i>
            </a>
        </li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">16</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">17</a></li>
        <li class="page-item">
            <a class="page-link text-primary" href="javascript:void(0);">
                بعدی
            </a>
        </li>
    </ul>
</nav>
سبک صفحه بندی-1 
<nav aria-label="پیمایش صفحه" class="pagination-style-1">
    <ul class="pagination mb-0">
        <li class="page-item disabled">
            <a class="page-link" href="javascript:void(0);">
                <i class="ri-arrow-left-s-line align-middle"></i>
            </a>
        </li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
        <li class="page-item active"><a class="page-link" href="javascript:void(0);">2</a></li>
        <li class="page-item">
            <a class="page-link" href="javascript:void(0);">
                <i class="bi bi-three-dots"></i>
            </a>
        </li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">21</a></li>
        <li class="page-item">
            <a class="page-link" href="javascript:void(0);">
                <i class="ri-arrow-right-s-line align-middle"></i>
            </a>
        </li>
    </ul>
</nav>
سبک صفحه بندی-2 
<nav aria-label="پیمایش صفحه" class="pagination-style-2">
    <ul class="pagination mb-0 flex-wrap">
        <li class="page-item disabled">
            <a class="page-link" href="javascript:void(0);">
                قبلی
            </a>
        </li>
        <li class="page-item active"><a class="page-link" href="javascript:void(0);">1</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
        <li class="page-item">
            <a class="page-link" href="javascript:void(0);">
                <i class="bi bi-three-dots"></i>
            </a>
        </li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">17</a></li>
        <li class="page-item">
            <a class="page-link text-primary" href="javascript:void(0);">
                بعدی
            </a>
        </li>
    </ul>
</nav>