rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

add alignment docs with flex utils

Browse Source
This commit is contained in:
Mark Otto 2016-12-28 14:45:11 -08:00 committed by Mark Otto
parent 12c6a97ce3
commit 766d22ebb7
1 changed files with 27 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
docs/components/pagination.md
View File

@ -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>