From e2252e023096daa7e852835a69c360484765c42b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 18 Jul 2019 02:27:53 +0300 Subject: [PATCH] First pass at .row-cols classes Trying to find a new way to do responsive card decks while not locking ourselves into the cards themselves. My thinking here is we can easily control the column (.col) width by the parent, but I don't know how many we need (have 0-5 now) across each breakpoint. This works for cards so far, and I think could get us equal height, too. --- scss/_card.scss | 12 ++++ site/content/docs/4.3/components/card.md | 88 +++++++++++++++++++++++- site/content/docs/4.3/layout/grid.md | 45 ++++++++++++ 3 files changed, 144 insertions(+), 1 deletion(-) diff --git a/scss/_card.scss b/scss/_card.scss index f68855c56c..9385859262 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 a3b64dc571..4f789fc6fd 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. {{< /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 >}} +
+
+
+ {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}} +
+
Card title
+

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+
+
+
+ {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}} +
+
Card title
+

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+
+
+
+ {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}} +
+
Card title
+

This is a longer card with supporting text below as a natural lead-in to additional content.

+
+
+
+
+
+ {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}} +
+
Card title
+

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+
+
+{{< /example >}} + +{{< example >}} +
+
+
+ {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}} +
+
Card title
+

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+
+
+
+ {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}} +
+
Card title
+

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+
+
+
+ {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}} +
+
Card title
+

This is a longer card with supporting text below as a natural lead-in to additional content.

+
+
+
+
+
+ {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}} +
+
Card title
+

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+
+
+{{< /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 9ea65e8071..372f68e738 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 {{< /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. + +
+{{< example >}} +
+
+
Column
+
Column
+
Column
+
Column
+
+
+{{< /example >}} +
+ +
+{{< example >}} +
+
+
Column
+
Column
+
Column
+
Column
+
+
+{{< /example >}} +
+ +
+{{< example >}} +
+
+
Column
+
Column
+
Column
+
Column
+
+
+{{< /example >}} +
+ ## 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) -- 2.47.2