Bootstrap4: pagination

theme/templates/category.html

@@ -20,28 +20,40 @@
 
 {# deal with pagination #}
 {% if articles_page and articles_paginator.num_pages > 1 %}
-<div class="row" style="margin-bottom: -1.25em;">
-	<div class="small-12 columns text-center">
-		<div class="pagination-centered">
-			<ul class="pagination">
-			{% if articles_page.has_previous() %}
-				{% set num = articles_page.previous_page_number() %}
-				<li class="arrow"><a href="{{ SITEURL }}/{{ page_name }}{{ num if num > 1 else '' }}.html">&larr; Previous</a></li>
-			{% else %}
-				<li class="arrow unavailable"><a href="#">&larr; Previous</a></li>
-			{% endif %}
-			{% for num in range( 1, 1 + articles_paginator.num_pages ) %}
-				<li class="{{ 'current' if num == articles_page.number else '' }}"><a href="{{ SITEURL }}/{{ page_name }}{{ num if num > 1 else '' }}.html">{{ num }}</a></li>
-			{% endfor %}
-			{% if articles_page.has_next() %}
-				<li class="arrow"><a href="{{ SITEURL }}/{{ page_name }}{{ articles_page.next_page_number() }}.html">Next &rarr;</a></li>
-			{% else %}
-				<li class="arrow unavailable"><a href="#">&rarr; Next</a></li>
-			{% endif %}
-			</ul>
-		</div>
-	</div>
-</div>
+<nav aria-label="Page navigation">
+    <ul class="pagination">
+    {% if articles_page.has_previous() %}
+        {% set num = articles_page.previous_page_number() %}
+        <li class="page-item">
+            <a class="page-link" href="{{ SITEURL }}/{{ page_name }}{{ num if num > 1 else '' }}.html">&larr; Previous</a>
+        </li>
+    {% else %}
+        <li class="page-item disabled">
+            <a href="#" class="page-link">
+                <span aria-hidden="true">&laquo;</span>
+                <span class="sr-only">Previous</span>
+            </a>
+        </li>
+    {% endif %}
+    {% for num in range( 1, 1 + articles_paginator.num_pages ) %}
+        <li class="page-item {{ 'active' if num == articles_page.number else '' }}">
+            <a class="page-link" href="{{ SITEURL }}/{{ page_name }}{{ num if num > 1 else '' }}.html">{{ num }}</a>
+        </li>
+    {% endfor %}
+    {% if articles_page.has_next() %}
+        <li class="page-item">
+            <a class="page-link" href="{{ SITEURL }}/{{ page_name }}{{ articles_page.next_page_number() }}.html">Next &rarr;</a>
+        </li>
+    {% else %}
+        <li class="page-item disabled">
+            <a class="page-link" href="#">
+                <span aria-hidden="true">&raquo;</span>
+                <span class="sr-only">Next</span>
+            </a>
+        </li>
+    {% endif %}
+    </ul>
+</nav>
 {% endif %}
 
 {% endblock %}