From your code and images, you want to implement Django built-in pagination with a
styled pagination bar like in your second image (showing page numbers and
navigation arrows).
Here’s how to do it step-by-step using Django's built-in pagination system:
---
✅ 1. View Logic (Python Side)
In your views.py, use Django's Paginator:
from django.core.paginator import Paginator
from django.shortcuts import render
from .models import Post
def post_list(request):
post_list = Post.objects.all()
paginator = Paginator(post_list, 6) # Show 6 posts per page
page_number = request.GET.get('page')
page_obj = paginator.get_page(page_number)
return render(request, 'yourapp/post_list.html', {'page_obj': page_obj})
---
✅ 2. Template Pagination Code (post_list.html)
This will display:
page numbers
current page in blue
« and » navigation
Replace your pagination block with this:
<div class="col-12">
<nav aria-label="Page navigation">
<ul class="pagination pagination-lg justify-content-center mb-0">
{% if page_obj.has_previous %}
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.previous_page_number }}"
aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link">«</span>
</li>
{% endif %}
{% for num in page_obj.paginator.page_range %}
{% if page_obj.number == num %}
<li class="page-item active">
<span class="page-link">{{ num }}</span>
</li>
{% else %}
<li class="page-item">
<a class="page-link" href="?page={{ num }}">{{ num }}</a>
</li>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-
label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link">»</span>
</li>
{% endif %}
</ul>
</nav>
</div>
---
✅ 3. Bootstrap Required
You are using Bootstrap classes like .pagination, .page-item, etc. Make sure
Bootstrap is included in your base template:
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet">
---
✅ Final Output
This will give you a pagination section like the second image:
« Previous button (disabled on first page)
Page numbers like 1 2 3
» Next button (disabled on last page)
---
Let me know if you're using Class-Based Views, category filtering, or want AJAX-
based pagination, and I can adjust the setup accordingly.
