root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 11 Packages Projects Releases Wiki Activity

add alignment docs with flex utils

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> </ul>
</nav> </nav>
{% endexample %} {% 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>
<li class="page-item"><a class="page-link" href="#">1</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="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"> <li class="page-item">
<a class="page-link" href="#" aria-label="Next"> <a class="page-link" href="#">Next</a>
<span aria-hidden="true">&raquo;</span> </li>
<span class="sr-only">Next</span> </ul>
</a> </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> </li>
</ul> </ul>
</nav> </nav>