diff options
| author | Mark Otto <[email protected]> | 2019-07-23 23:00:29 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2019-08-30 13:07:27 -0700 |
| commit | cc248791b0f260aa6e0505a0aa7c3faeb1cbc797 (patch) | |
| tree | 926672156b3b47911e4bcb3e471dc93fe889c719 /site/content/docs | |
| parent | db692d02d555a66219283d5e2150a681fafee1e6 (diff) | |
| download | bootstrap-cc248791b0f260aa6e0505a0aa7c3faeb1cbc797.tar.xz bootstrap-cc248791b0f260aa6e0505a0aa7c3faeb1cbc797.zip | |
Cleanup
- Rename and move the variable to variables file
- Move code to the grid file
- Use the mixin to generate our own classes
- Wrap in a grid classes enabled conditional
- Document the mixin
Diffstat (limited to 'site/content/docs')
| -rw-r--r-- | site/content/docs/4.3/layout/grid.md | 14 |
1 files changed, 14 insertions, 0 deletions
diff --git a/site/content/docs/4.3/layout/grid.md b/site/content/docs/4.3/layout/grid.md index 372f68e73..2d839968f 100644 --- a/site/content/docs/4.3/layout/grid.md +++ b/site/content/docs/4.3/layout/grid.md @@ -369,6 +369,20 @@ Use these row columns classes to quickly create basic grid layouts or to control {{< /example >}} </div> +You can also use the accompanying Sass mixin, `row-cols()`: + +{{< highlight scss >}} +.element { + // Three columns to start + @include row-cols(3); + + // Five columns from medium breakpoint up + @include media-breakpoint-up(md) { + @include row-cols(5); + } +} +{{< /highlight >}} + ## Alignment Use flexbox alignment utilities to vertically and horizontally align columns. **Internet Explorer 10-11 do not support vertical alignment of flex items when the flex container has a `min-height` as shown below.** [See Flexbugs #3 for more details.](https://github.com/philipwalton/flexbugs#flexbug-3) |