add alignment docs with flex utils

diff --git a/docs/components/pagination.md b/docs/components/pagination.md
index dcede5428cb1334713fc1fae9cce7000dfe72d82..0273e8efe3809f7c8470a345ae31d19446962e0e 100644 (file)
--- a/docs/components/pagination.md
+++ b/docs/components/pagination.md
@@ -138,15 +138,38 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
   </ul>
 </nav>
 {% endexample %}
+
+## Alignment
+
+Change the alignment of pagination components with [flexbox utilities]({{ site.baseurl }}/utilities/flexbox).
+
+{% example html %}
+<nav aria-label="Page navigation example">
+  <ul class="pagination justify-content-center">
+    <li class="page-item disabled">
+      <a class="page-link" href="#" tabindex="-1">Previous</a>
     </li>
     <li class="page-item"><a class="page-link" href="#">1</a></li>
     <li class="page-item"><a class="page-link" href="#">2</a></li>
     <li class="page-item"><a class="page-link" href="#">3</a></li>
     <li class="page-item">
-      <a class="page-link" href="#" aria-label="Next">
-        <span aria-hidden="true">&raquo;</span>
-        <span class="sr-only">Next</span>
-      </a>
+      <a class="page-link" href="#">Next</a>
+    </li>
+  </ul>
+</nav>
+{% endexample %}
+
+{% example html %}
+<nav aria-label="Page navigation example">
+  <ul class="pagination justify-content-end">
+    <li class="page-item disabled">
+      <a class="page-link" href="#" tabindex="-1">Previous</a>
+    </li>
+    <li class="page-item"><a class="page-link" href="#">1</a></li>
+    <li class="page-item"><a class="page-link" href="#">2</a></li>
+    <li class="page-item"><a class="page-link" href="#">3</a></li>
+    <li class="page-item">
+      <a class="page-link" href="#">Next</a>
     </li>
   </ul>
 </nav>