Skip to content
GitLab
Commit 9a519bb7 authored by Mark Otto's avatar Mark Otto
Browse files

Add vertical alignment docs for flexbox grid

parent 7b7cf221
31 merge requests!28721Hot test,!27561Adds font-weight-medium to font weight classes,!26437merge,!26197V4 dev xmr,!20778V4 dev,!20539Allow multiple modals,!20854Fixes 15534,!19272V4 dev xmr grunt html,!19581V4 fix popover,!20493V4 dev display,!20636Fix docs for heading sizes,!19824blockquote-center,!22547Finished a new translation for bootstrap,!19534Docs 17264,!18704Extend form docs with example form errors,!19533Npm deps,!22143Fix selectable disabled toggle radio buttons,!22598test,!21067dfsa,!19602V4 palettes arun,!19448New pull request for testing,!19358XXL grid size,!19825.blockquote-center,!25326Adjust examples,!23995Add back cursor: pointer for .btn-link,!23178Spinner,!19754Issue template,!19753Card img overlay padding,!19580ExitStars,!19099v4: Grid redux,!17021v4
Hide whitespace changes
Inline Side-by-side
Showing
with 62 additions and 0 deletions
+62 -0
docs/layout/flexbox-grid.md
+ 62
- 0
View file @ 9a519bb7
......@@ -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>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment