{% if is_paginated %}
{% load i18n %}
-<div class="pagination">
+<nav aria-label="{% trans 'Pagination' %}" class="mt-4">
+ <ul class="pagination justify-content-center">
{% if page_obj.has_previous %}
- <a href="?page={{ page_obj.previous_page_number }}{{ getvars }}{{ hashtag }}" class="prev">‹‹ {% trans "previous" %}</a>
+ <li class="page-item">
+ <a href="?page={{ page_obj.previous_page_number }}{{ getvars }}{{ hashtag }}" class="page-link">
+ {% trans "previous" %}
+ </a>
+ </li>
{% else %}
- <span class="disabled prev">‹‹ {% trans "previous" %}</span>
+ <li class="page-item disabled">
+ <span class="page-link">
+ {% trans "previous" %}
+ </span>
+ </li>
+ {% endif %}
+
+ {% for page in pages %}
+ {% if page %}
+ {% if page == page_obj.number %}
+ <li class="page-item active">
+ <span class="page-link">
+ {{ page }}
+ </span>
+ </li>
+ {% else %}
+ <li class="page-item">
+ <a href="?page={{ page }}{{ getvars }}{{ hashtag }}" class="page-link">
+ {{ page }}
+ </a>
+ </li>
+ {% endif %}
{% endif %}
- {% for page in pages %}
- {% if page %}
- {% ifequal page page_obj.number %}
- <span class="current page">{{ page }}</span>
- {% else %}
- <a href="?page={{ page }}{{ getvars }}{{ hashtag }}" class="page">{{ page }}</a>
- {% endifequal %}
- {% else %}
- ...
- {% endif %}
{% endfor %}
+
{% if page_obj.has_next %}
- <a href="?page={{ page_obj.next_page_number }}{{ getvars }}{{ hashtag }}" class="next">{% trans "next" %} ››</a>
+ <li class="page-item">
+ <a href="?page={{ page_obj.next_page_number }}{{ getvars }}{{ hashtag }}" class="page-link">
+ {% trans "next" %}
+ </a>
+ </li>
{% else %}
- <span class="disabled next">{% trans "next" %} ››</span>
+ <li class="page-item disabled">
+ <span class="page-link">
+ {% trans "next" %}
+ </span>
+ </li>
{% endif %}
-</div>
+ </ul>
+</nav>
+
{% endif %}