diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2023-06-24 12:44:36 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2023-06-24 12:44:36 +0000 |
commit | c1d5a801b4bc66e3866f815be00e11d1b20d3539 (patch) | |
tree | 394cfedf644640ac80b78aaddaff93ceb8eefa5e /site/content/docs/5.2/layout/columns.md | |
parent | Adding upstream version 5.2.3+dfsg. (diff) | |
download | bootstrap-html-upstream/5.3.0+dfsg.tar.xz bootstrap-html-upstream/5.3.0+dfsg.zip |
Adding upstream version 5.3.0+dfsg.upstream/5.3.0+dfsg
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
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 >}} |