diff options
| author | Mark Otto <markdotto@gmail.com> | 2022-09-11 23:29:09 +0300 |
|---|---|---|
| committer | Mark Otto <markdotto@gmail.com> | 2022-11-11 21:27:17 +0300 |
| commit | 9bd4ec7f08931bf1e37a78f35d18d470a892bdc7 (patch) | |
| tree | 1f644c53b2d7c8c7f4893bb162fa0b95af8152c8 | |
| parent | 7d564aac416db4bac7943c93948ee9961c9f52b2 (diff) | |
Improve some grid docs, minor
| -rw-r--r-- | site/content/docs/5.2/layout/columns.md | 14 |
1 files changed, 14 insertions, 0 deletions
diff --git a/site/content/docs/5.2/layout/columns.md b/site/content/docs/5.2/layout/columns.md index e2dbd3f176..f63f551963 100644 --- a/site/content/docs/5.2/layout/columns.md +++ b/site/content/docs/5.2/layout/columns.md @@ -24,6 +24,8 @@ Use flexbox alignment utilities to vertically and horizontally align columns. ### Vertical alignment +Change the vertical alignment with any of the responsive `align-items-*` classes. + {{< example class="bd-example-row bd-example-row-flex-cols" >}} <div class="container text-center"> <div class="row align-items-start"> @@ -37,6 +39,11 @@ Use flexbox alignment utilities to vertically and horizontally align columns. One of three columns </div> </div> +</div> +{{< /example >}} + +{{< example class="bd-example-row bd-example-row-flex-cols" >}} +<div class="container text-center"> <div class="row align-items-center"> <div class="col"> One of three columns @@ -48,6 +55,11 @@ Use flexbox alignment utilities to vertically and horizontally align columns. One of three columns </div> </div> +</div> +{{< /example >}} + +{{< example class="bd-example-row bd-example-row-flex-cols" >}} +<div class="container text-center"> <div class="row align-items-end"> <div class="col"> One of three columns @@ -62,6 +74,8 @@ Use flexbox alignment utilities to vertically and horizontally align columns. </div> {{< /example >}} +Or, change the alignment of each column individually with any of the responsive `.align-self-*` classes. + {{< example class="bd-example-row bd-example-row-flex-cols" >}} <div class="container text-center"> <div class="row"> |