diff options
| author | Anal-Retentive Squirrel Hunter <43895102+lacutah@users.noreply.github.com> | 2021-06-03 19:18:00 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-06-03 19:18:00 +0300 |
| commit | f2b47e1c8a263f4406255991af9fd55984c22a0e (patch) | |
| tree | b6dced14aa652825d494782dba79f21d44e38c9c /site/content/docs/5.0 | |
| parent | f14d1a4c1700ddb0df72645bab3551877be2b21e (diff) | |
Allow individual grid classes to override `.row-cols` (#33621)
Diffstat (limited to 'site/content/docs/5.0')
| -rw-r--r-- | site/content/docs/5.0/layout/grid.md | 23 |
1 files changed, 21 insertions, 2 deletions
diff --git a/site/content/docs/5.0/layout/grid.md b/site/content/docs/5.0/layout/grid.md index d0c7a80f7e..afa3818a20 100644 --- a/site/content/docs/5.0/layout/grid.md +++ b/site/content/docs/5.0/layout/grid.md @@ -299,9 +299,9 @@ Don't want your columns to simply stack in some grid tiers? Use a combination of ### Row columns -Use the responsive `.row-cols-*` classes to quickly set the number of columns that best render your content and layout. Whereas normal `.col-*` classes apply to the individual columns (e.g., `.col-md-4`), the row columns classes are set on the parent `.row` as a shortcut. With `.row-cols-auto` you can give the columns their natural width. +Use the responsive `.row-cols-*` classes to quickly set the number of columns that best render your content and layout. Whereas normal `.col-*` classes apply to the individual columns (e.g., `.col-md-4`), the row columns classes are set on the parent `.row` as a default for contained columns. With `.row-cols-auto` you can give the columns their natural width. -Use these row columns classes to quickly create basic grid layouts or to control your card layouts. +Use these row columns classes to quickly create basic grid layouts or to control your card layouts and override when needed at the column level. {{< example class="bd-example-row" >}} <div class="container"> @@ -369,6 +369,25 @@ Use these row columns classes to quickly create basic grid layouts or to control </div> {{< /example >}} +{{< example class="bd-example-row" >}} +<div class="container"> + <div class="row row-cols-2 row-cols-lg-3"> + <div class="col">Column</div> + <div class="col">Column</div> + <div class="col">Column</div> + <div class="col">Column</div> + <div class="col">Column</div> + <div class="col">Column</div> + <div class="col-4 col-lg-2">Column</div> + <div class="col-4 col-lg-2">Column</div> + <div class="col-4 col-lg-2">Column</div> + <div class="col-4 col-lg-2">Column</div> + <div class="col-4 col-lg-2">Column</div> + <div class="col-4 col-lg-2">Column</div> + </div> +</div> +{{< /example >}} + You can also use the accompanying Sass mixin, `row-cols()`: ```scss |