diff options
| author | Mark Otto <[email protected]> | 2016-02-06 01:47:25 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-02-06 01:47:25 -0800 |
| commit | 2a678d4b8813870e9cdc14d666b9a3bcf36fe1f8 (patch) | |
| tree | 713afe323c32c444ea3bfb15acf5d3b2187d00e9 /docs/layout | |
| parent | 9e3214051d203db8f3578a0c0ada82d2ed94872a (diff) | |
| download | bootstrap-2a678d4b8813870e9cdc14d666b9a3bcf36fe1f8.tar.xz bootstrap-2a678d4b8813870e9cdc14d666b9a3bcf36fe1f8.zip | |
document horizontal flex utils, update the classes for the middle vertical ones
Diffstat (limited to 'docs/layout')
| -rw-r--r-- | docs/layout/flexbox-grid.md | 55 |
1 files changed, 53 insertions, 2 deletions
diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 00097c3cd..2c78101d6 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -88,7 +88,7 @@ Use the flexbox alignment utilities to vertically align columns. One of three columns </div> </div> - <div class="row flex-items-xs-center"> + <div class="row flex-items-xs-middle"> <div class="col"> One of three columns </div> @@ -121,7 +121,7 @@ Use the flexbox alignment utilities to vertically align columns. <div class="col flex-xs-top"> One of three columns </div> - <div class="col flex-xs-center"> + <div class="col flex-xs-middle"> One of three columns </div> <div class="col flex-xs-bottom"> @@ -131,3 +131,54 @@ Use the flexbox alignment utilities to vertically align columns. </div> {% endexample %} </div> + +## Horizontal alignment + +Flexbox utilities for horizontal alignment also exist for a number of layout options. + +<div class="bd-example-row"> +{% example html %} +<div class="container"> + <div class="row flex-items-xs-left"> + <div class="col col-xs-4"> + One of two columns + </div> + <div class="col col-xs-4"> + One of two columns + </div> + </div> + <div class="row flex-items-xs-center"> + <div class="col col-xs-4"> + One of two columns + </div> + <div class="col col-xs-4"> + One of two columns + </div> + </div> + <div class="row flex-items-xs-right"> + <div class="col col-xs-4"> + One of two columns + </div> + <div class="col col-xs-4"> + One of two columns + </div> + </div> + <div class="row flex-items-xs-around"> + <div class="col col-xs-4"> + One of two columns + </div> + <div class="col col-xs-4"> + One of two columns + </div> + </div> + <div class="row flex-items-xs-between"> + <div class="col col-xs-4"> + One of two columns + </div> + <div class="col col-xs-4"> + One of two columns + </div> + </div> +</div> +{% endexample %} +</div> |