diff options
| -rw-r--r-- | scss/_card.scss | 12 | ||||
| -rw-r--r-- | site/content/docs/4.3/components/card.md | 88 | ||||
| -rw-r--r-- | site/content/docs/4.3/layout/grid.md | 45 |
3 files changed, 144 insertions, 1 deletions
diff --git a/scss/_card.scss b/scss/_card.scss index f68855c56..938585926 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -175,6 +175,18 @@ } } +$row-columns: 6 !default; + +@each $breakpoint in map-keys($grid-breakpoints) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + @for $i from 1 through $row-columns { + .row-cols#{$infix}-#{$i} > [class^="col"] { + flex: 0 0 calc(100% / #{$i}); + } + } +} + // // Card groups diff --git a/site/content/docs/4.3/components/card.md b/site/content/docs/4.3/components/card.md index a3b64dc57..4f789fc6f 100644 --- a/site/content/docs/4.3/components/card.md +++ b/site/content/docs/4.3/components/card.md @@ -601,6 +601,92 @@ Just like with card groups, card footers in decks will automatically line up. </div> {{< /example >}} -### Card columns (Masonry layout) +### Grid cards + +Use the Bootstrap grid system and its [`.rol-cols` classes]() to control how many grid columns (wrapped around your cards) you show per row. + +{{< example >}} +<div class="row row-cols-2"> + <div class="col"> + <div class="card mb-4"> + {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}} + <div class="card-body"> + <h5 class="card-title">Card title</h5> + <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> + </div> + </div> + <div class="col"> + <div class="card mb-4"> + {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}} + <div class="card-body"> + <h5 class="card-title">Card title</h5> + <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> + </div> + </div> + <div class="col"> + <div class="card mb-4"> + {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}} + <div class="card-body"> + <h5 class="card-title">Card title</h5> + <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p> + </div> + </div> + </div> + <div class="col"> + <div class="card mb-4"> + {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}} + <div class="card-body"> + <h5 class="card-title">Card title</h5> + <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> + </div> + </div> +</div> +{{< /example >}} + +{{< example >}} +<div class="row row-cols-3"> + <div class="col"> + <div class="card mb-4"> + {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}} + <div class="card-body"> + <h5 class="card-title">Card title</h5> + <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> + </div> + </div> + <div class="col"> + <div class="card mb-4"> + {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}} + <div class="card-body"> + <h5 class="card-title">Card title</h5> + <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> + </div> + </div> + <div class="col"> + <div class="card mb-4"> + {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}} + <div class="card-body"> + <h5 class="card-title">Card title</h5> + <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p> + </div> + </div> + </div> + <div class="col"> + <div class="card mb-4"> + {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}} + <div class="card-body"> + <h5 class="card-title">Card title</h5> + <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> + </div> + </div> +</div> +{{< /example >}} + +### Masonry In `v4` we used a CSS-only technique to mimic the behavior of [Masonry](https://masonry.desandro.com/)-like columns, but this technique came with lots of unpleasant [side effects](https://github.com/twbs/bootstrap/pull/28922). If you want to have this type of layout in `v5`, you can just make use of Masonry plugin. **Masonry is not included in Bootstrap**, but we've made a [demo example]({{< docsref "/examples/masonry" >}}) to help you get started. diff --git a/site/content/docs/4.3/layout/grid.md b/site/content/docs/4.3/layout/grid.md index 9ea65e807..372f68e73 100644 --- a/site/content/docs/4.3/layout/grid.md +++ b/site/content/docs/4.3/layout/grid.md @@ -324,6 +324,51 @@ Here's an example of customizing the Bootstrap grid at the large (`lg`) breakpoi </div> {{< /example >}} +### 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. + +Use these row columns classes to quickly create basic grid layouts or to control your card layouts. + +<div class="bd-example-row"> +{{< example >}} +<div class="container"> + <div class="row row-cols-2"> + <div class="col">Column</div> + <div class="col">Column</div> + <div class="col">Column</div> + <div class="col">Column</div> + </div> +</div> +{{< /example >}} +</div> + +<div class="bd-example-row"> +{{< example >}} +<div class="container"> + <div class="row row-cols-3"> + <div class="col">Column</div> + <div class="col">Column</div> + <div class="col">Column</div> + <div class="col">Column</div> + </div> +</div> +{{< /example >}} +</div> + +<div class="bd-example-row"> +{{< example >}} +<div class="container"> + <div class="row row-cols-4"> + <div class="col">Column</div> + <div class="col">Column</div> + <div class="col">Column</div> + <div class="col">Column</div> + </div> +</div> +{{< /example >}} +</div> + ## 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) |