diff options
| author | Mark Otto <markdotto@gmail.com> | 2022-09-11 23:37:43 +0300 |
|---|---|---|
| committer | Mark Otto <markdotto@gmail.com> | 2022-11-11 21:27:17 +0300 |
| commit | bfd47ae256604f6debb6abd394fa89f628f51c20 (patch) | |
| tree | 7ff5aff733858307f9c32ab579db6d2cce4453ed | |
| parent | 9bd4ec7f08931bf1e37a78f35d18d470a892bdc7 (diff) | |
Fix standalone column classes styling
| -rw-r--r-- | site/content/docs/5.2/layout/columns.md | 9 |
1 files changed, 5 insertions, 4 deletions
diff --git a/site/content/docs/5.2/layout/columns.md b/site/content/docs/5.2/layout/columns.md index f63f551963..1ed14844f3 100644 --- a/site/content/docs/5.2/layout/columns.md +++ b/site/content/docs/5.2/layout/columns.md @@ -201,7 +201,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"> @@ -301,11 +301,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 >}} |