Pagination with Django and Bootstrap 5

In this recipe, we will use Django pagination to display a paginated list of Items and add Bootstrap 5 styles. Replace the Item class with any Django model in your own project.

Create the paginated list

In the View, such as in the get_context method of a class-based view:

# Add these imports at the top of your View file
from django.core.paginator import (
    Paginator,
    EmptyPage,
    PageNotAnInteger,
)

# Then, in the view, such as the get_context method:

# Get page number from request, 
# default to first page
default_page = 1
page = request.GET.get('page', default_page)

# Get queryset of items to paginate
items = Item.objects.all()

# Paginate items
items_per_page = 10
paginator = Paginator(items, items_per_page)

try:
    items_page = paginator.page(page)
except PageNotAnInteger:
    items_page = paginator.page(default_page)
except EmptyPage:
    items_page = paginator.page(paginator.num_pages)

# Provide filtered, paginated library items
context["items_page"] = items_page

Render the paginated items and paginator widget

Once you have passed the paginated items to the template, render the items along with a paginated button group.

{% if items_page %}
    {% for item in items_page %}
        <div class="card mb-1">
            <div class="card-body">
              <p class="card-title">{{ item.title }}</p>
            </div>
        </div>
    {% endfor %}

    {% if items_page.has_other_pages %}
    <div class="btn-group" role="group" aria-label="Item pagination">
        {% if items_page.has_previous %}
            <a href="?page={{ items_page.previous_page_number }}" class="btn btn-outline-primary">&laquo;</a>
        {% endif %}

        {% for page_number in items_page.paginator.page_range %}
            {% if items_page.number == page_number %}
                <button class="btn btn-outline-primary active">
                    <span>{{ page_number }} <span class="sr-only">(current)</span></span>
                </button>
            {% else %}
                <a href="?page={{ page_number }}" class="btn btn-outline-primary">
                    {{ page_number }}
                </a>
            {% endif %}
        {% endfor %}

        {% if items_page.has_next %}
            <a href="?page={{ items_page.next_page_number }}" class="btn btn-outline-primary">&raquo;</a>
        {% endif %}
    </div>
    {% endif %}
{% else %}
    <p>No items found.</p>
{% endif %}