diff options
| author | Mark Otto <[email protected]> | 2016-02-06 01:30:11 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-02-06 01:30:11 -0800 |
| commit | 9a519bb7e33c65456aaaf401b6f90975309d416d (patch) | |
| tree | cbf6f72b5539b7c95cf77ae9ac7cea2b71af8da2 /docs/layout | |
| parent | 7b7cf221cd1e0a1e07889a5e766de19466445a32 (diff) | |
| download | bootstrap-9a519bb7e33c65456aaaf401b6f90975309d416d.tar.xz bootstrap-9a519bb7e33c65456aaaf401b6f90975309d416d.zip | |
Add vertical alignment docs for flexbox grid
Diffstat (limited to 'docs/layout')
| -rw-r--r-- | docs/layout/flexbox-grid.md | 62 |
1 files changed, 62 insertions, 0 deletions
diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 4ccd37f48..00097c3cd 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -69,3 +69,65 @@ Auto-layout for flexbox grid columns also means you can set the width of one col </div> {% endexample %} </div> + +## Vertical alignment + +Use the flexbox alignment utilities to vertically align columns. + +<div class="bd-example-row"> +{% example html %} +<div class="container"> + <div class="row flex-items-xs-top"> + <div class="col"> + One of three columns + </div> + <div class="col"> + One of three columns + </div> + <div class="col"> + One of three columns + </div> + </div> + <div class="row flex-items-xs-center"> + <div class="col"> + One of three columns + </div> + <div class="col"> + One of three columns + </div> + <div class="col"> + One of three columns + </div> + </div> + <div class="row flex-items-xs-bottom"> + <div class="col"> + One of three columns + </div> + <div class="col"> + One of three columns + </div> + <div class="col"> + One of three columns + </div> + </div> +</div> +{% endexample %} +</div> + +<div class="bd-example-row bd-example-row-flex-cols"> +{% example html %} +<div class="container"> + <div class="row"> + <div class="col flex-xs-top"> + One of three columns + </div> + <div class="col flex-xs-center"> + One of three columns + </div> + <div class="col flex-xs-bottom"> + One of three columns + </div> + </div> +</div> +{% endexample %} +</div> |