diff options
Diffstat (limited to '')
-rw-r--r-- | site/content/docs/5.3/layout/columns.md (renamed from site/content/docs/5.2/layout/columns.md) | 25 |
1 files changed, 21 insertions, 4 deletions
diff --git a/site/content/docs/5.2/layout/columns.md b/site/content/docs/5.3/layout/columns.md index e2dbd3f..e6f5255 100644 --- a/site/content/docs/5.2/layout/columns.md +++ b/site/content/docs/5.3/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"> @@ -80,6 +94,8 @@ Use flexbox alignment utilities to vertically and horizontally align columns. ### Horizontal alignment +Change the horizontal alignment with any of the responsive `justify-content-*` classes. + {{< example class="bd-example-row" >}} <div class="container text-center"> <div class="row justify-content-start"> @@ -187,7 +203,7 @@ You may also apply this break at specific breakpoints with our [responsive displ ### Order classes -Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `5` across all six grid tiers. +Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `5` across all six grid tiers. If you need more `.order-*` classes, you can modify the default number via Sass variable. {{< example class="bd-example-row" >}} <div class="container text-center"> @@ -287,11 +303,12 @@ With the move to flexbox in v4, you can use margin utilities like `.me-auto` to The `.col-*` classes can also be used outside a `.row` to give an element a specific width. Whenever column classes are used as non-direct children of a row, the paddings are omitted. -{{< example >}} -<div class="col-3 bg-light p-3 border"> +{{< example class="bd-example-row" >}} +<div class="col-3 p-3 mb-2"> .col-3: width of 25% </div> -<div class="col-sm-9 bg-light p-3 border"> + +<div class="col-sm-9 p-3"> .col-sm-9: width of 75% above sm breakpoint </div> {{< /example >}} |