diff options
Diffstat (limited to 'docs/components')
| -rw-r--r-- | docs/components/pagination.md | 31 |
1 files changed, 27 insertions, 4 deletions
diff --git a/docs/components/pagination.md b/docs/components/pagination.md index dcede5428..0273e8efe 100644 --- 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">»</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> |