diff --git a/bakerydemo/breads/models.py b/bakerydemo/breads/models.py
index 6f1d8e1..8e92b67 100644
--- a/bakerydemo/breads/models.py
+++ b/bakerydemo/breads/models.py
@@ -94,26 +94,27 @@ class BreadsIndexPage(BasePageFieldsMixin, Page):
 
     subpage_types = ['BreadPage']
 
+    @property
+    def breads(self):
+        return BreadPage.objects.live().descendant_of(
+            self).order_by('-first_published_at')
+
+    def paginate(self, request, *args):
+        page = request.GET.get('page')
+        paginator = Paginator(self.breads, 2)
+        try:
+            pages = paginator.page(page)
+        except PageNotAnInteger:
+            pages = paginator.page(1)
+        except EmptyPage:
+            pages = paginator.page(paginator.num_pages)
+        return pages
+
     def get_context(self, request):
         context = super(BreadsIndexPage, self).get_context(request)
 
-        # Get the full unpaginated listing of resource pages as a queryset -
-        # replace this with your own query as appropriate
-        all_resources = self.get_children().live()
+        breads = self.paginate(request, self.breads)
 
-        paginator = Paginator(all_resources, 5)  # Show 5 resources per page
+        context['breads'] = breads
 
-        page = request.GET.get('page')
-        try:
-            resources = paginator.page(page)
-        except PageNotAnInteger:
-            # If page is not an integer, deliver first page.
-            resources = paginator.page(1)
-        except EmptyPage:
-            # If page is out of range (e.g. 9999), deliver last page of results.
-            resources = paginator.page(paginator.num_pages)
-
-        # make the variable 'resources' available on the template
-        context['resources'] = resources
-        context['paginator'] = paginator
         return context
diff --git a/bakerydemo/templates/breads/breads_index_page.html b/bakerydemo/templates/breads/breads_index_page.html
index 13f6765..cea91a7 100644
--- a/bakerydemo/templates/breads/breads_index_page.html
+++ b/bakerydemo/templates/breads/breads_index_page.html
@@ -35,29 +35,41 @@
     </div>
 </div>
 
-	{% if resources.has_other_pages %}
-	<div class="clearfix">
-	  <div class="pagination-wrapper">
-	    <ul class="pagination">
-	      {% if resources.has_previous %}
-	        <li class="arrows"><a href="?q={{ query_string|urlencode }}&amp;page={{ resources.previous_page_number }}" class="arrow-left"></a></li>
-	      {% else %}
-	        <li class="arrows disabled"><span class="arrow-left"></span></li>
-	      {% endif %}
-	      {% for i in resources.paginator.page_range %}
-	        {% if resources.number == i %}
-	          <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
-	        {% else %}
-	          <li><a href="?q={{ query_string|urlencode }}&amp;page={{ i }}">{{ i }}</a></li>
-	        {% endif %}
-	      {% endfor %}
-	      {% if resources.has_next %}
-	        <li class="arrows"><a href="?q={{ query_string|urlencode }}&amp;page={{ resources.next_page_number }}"><i class="arrow-right"></i></a></li>
-	      {% else %}
-	        <li class="arrows disabled"><span><i class="arrow-right"></i></span></li>
-	      {% endif %}
-	    </ul>
-	  </div>
-	</div>
-	{% endif %}
+
+{% if breads.paginator.count > 1 %}
+<div class="container">
+    <div class="row">
+        <div class="col-md-12">
+        {% include "includes/pagination.html" with subpages=breads %}
+        </div>
+    </div>
+</div>
+{% endif %}
+{% comment %}
+        {% if resources.has_other_pages %}
+    <div class="clearfix">
+      <div class="pagination-wrapper">
+        <ul class="pagination">
+          {% if resources.has_previous %}
+            <li class="arrows"><a href="?q={{ query_string|urlencode }}&amp;page={{ resources.previous_page_number }}" class="arrow-left"></a></li>
+          {% else %}
+            <li class="arrows disabled"><span class="arrow-left"></span></li>
+          {% endif %}
+          {% for i in resources.paginator.page_range %}
+            {% if resources.number == i %}
+              <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
+            {% else %}
+              <li><a href="?q={{ query_string|urlencode }}&amp;page={{ i }}">{{ i }}</a></li>
+            {% endif %}
+          {% endfor %}
+          {% if resources.has_next %}
+            <li class="arrows"><a href="?q={{ query_string|urlencode }}&amp;page={{ resources.next_page_number }}"><i class="arrow-right"></i></a></li>
+          {% else %}
+            <li class="arrows disabled"><span><i class="arrow-right"></i></span></li>
+          {% endif %}
+        </ul>
+      </div>
+    </div>
+    {% endif %}
+{% endcomment %}
 {% endblock content %}
diff --git a/bakerydemo/templates/includes/pagination.html b/bakerydemo/templates/includes/pagination.html
new file mode 100644
index 0000000..4f4d84a
--- /dev/null
+++ b/bakerydemo/templates/includes/pagination.html
@@ -0,0 +1,33 @@
+{% load navigation_tags %}
+
+<nav role="navigation" aria-label="Pagination">
+    <ul class="pagination">
+        {% if subpages.has_previous %}
+            <li class="page-item">
+                <a href="?page={{ subpages.previous_page_number }}" class="page-link previous arrows">previous</a>
+            </li>
+            {% else %}
+            <li class="page-item disabled">
+                <a class="page-link">previous</a>
+            </li>
+        {% endif %}
+
+        {% for i in subpages.paginator.page_range %}
+            {% if subpages.number == i %}
+              <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
+            {% else %}
+              <li class="page-item"><a href="?page={{ query_string|urlencode }}&amp;page={{ i }}" class="page-link">{{ i }}</a></li>
+            {% endif %}
+          {% endfor %}
+
+        {% if subpages.has_next %}
+            <li class="page-item">
+                <a href="?page={{ subpages.next_page_number }}" class="page-link next arrows">next</a>
+            </li>
+            {% else %}
+            <li class="page-item disabled">
+                <a class="page-link">next</a>
+            </li>
+        {% endif %}
+    </ul>
+</nav>
\ No newline at end of file