Pagination

Basic

{% component "Pagination" %}
                {% component "PaginationItem" href="#" %}Previous{% endcomponent %}
                {% component "PaginationItem" href="#" %}1{% endcomponent %}
                {% component "PaginationItem" href="#" %}2{% endcomponent %}
                {% component "PaginationItem" href="#" %}3{% endcomponent %}
                {% component "PaginationItem" href="#" %}Next{% endcomponent %}
            {% endcomponent %}

Preview:

With Icons

{% component "Pagination" %}
                {% component "PaginationItem" href="#" aria_label="Previous" %}
                    <span aria-hidden="true">&laquo;</span>
                {% endcomponent %}
                {% component "PaginationItem" href="#" %}1{% endcomponent %}
                {% component "PaginationItem" href="#" %}2{% endcomponent %}
                {% component "PaginationItem" href="#" %}3{% endcomponent %}
                {% component "PaginationItem" href="#" aria_label="Next" %}
                    <span aria-hidden="true">&raquo;</span>
                {% endcomponent %}
            {% endcomponent %}

Preview:

Active State

{% component "Pagination" %}
                <li class="page-item"><a href="#" class="page-link">Previous</a></li>
                {% component "PaginationItem" href="#" %}1{% endcomponent %}
                {% component "PaginationItem" href="#" active=True %}2{% endcomponent %}
                {% component "PaginationItem" href="#" %}3{% endcomponent %}
                <li class="page-item"><a class="page-link" href="#">Next</a></li>
            {% endcomponent %}

Preview:

Disabled State

{% component "Pagination" %}
                {% component "PaginationItem" disabled=True %}Previous{% endcomponent %}
                {% component "PaginationItem" href="#" %}1{% endcomponent %}
                {% component "PaginationItem" href="#" active=True %}2{% endcomponent %}
                {% component "PaginationItem" href="#" %}3{% endcomponent %}
                {% component "PaginationItem" href="#" %}Next{% endcomponent %}
            {% endcomponent %}

Preview:

Large Sizing

{% component "Pagination" size="lg" %}
                {% component "PaginationItem" active=True %}1{% endcomponent %}
                {% component "PaginationItem" href="#" %}2{% endcomponent %}
                {% component "PaginationItem" href="#" %}3{% endcomponent %}
            {% endcomponent %}

Preview:

Small Sizing

{% component "Pagination" size="sm" %}
                {% component "PaginationItem" active=True %}1{% endcomponent %}
                {% component "PaginationItem" href="#" %}2{% endcomponent %}
                {% component "PaginationItem" href="#" %}3{% endcomponent %}
            {% endcomponent %}

Preview:

Centered Alignment

{% component "Pagination" ul_attrs:class="justify-content-center" %}
                {% component "PaginationItem" disabled=True %}Previous{% endcomponent %}
                {% component "PaginationItem" href="#" %}1{% endcomponent %}
                {% component "PaginationItem" href="#" %}2{% endcomponent %}
                {% component "PaginationItem" href="#" %}3{% endcomponent %}
                {% component "PaginationItem" href="#" %}Next{% endcomponent %}
            {% endcomponent %}

Preview:

Right Alignment

{% component "Pagination" ul_attrs:class="justify-content-end" %}
                {% component "PaginationItem" disabled=True %}Previous{% endcomponent %}
                {% component "PaginationItem" href="#" %}1{% endcomponent %}
                {% component "PaginationItem" href="#" %}2{% endcomponent %}
                {% component "PaginationItem" href="#" %}3{% endcomponent %}
                {% component "PaginationItem" href="#" %}Next{% endcomponent %}
            {% endcomponent %}

Preview: