Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v4/v5: Row columns for responsive card decks and more #29073

Merged
merged 8 commits into from
Aug 30, 2019
Merged

v4/v5: Row columns for responsive card decks and more #29073

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
bbe465c
First pass at .row-cols classes
mdo Jul 17, 2019
7d554bf
Move margins, and equal height via utility example
mdo Jul 17, 2019
c952397
Cleanup
mdo Jul 24, 2019
c5f92e5
Allow override default col width
ysds Aug 28, 2019
f4655d9
Merge branch 'master' into row-cols
XhmikosR Aug 28, 2019
1299d9d
Add responsive example
ysds Aug 29, 2019
a32ec82
Merge branch 'master' into row-cols
XhmikosR Aug 29, 2019
469a3d2
Merge branch 'master' into row-cols
XhmikosR Aug 30, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,6 +215,7 @@ $container-max-widths: (

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
$grid-row-columns: 6 !default;


// Container padding
Expand Down
7 changes: 7 additions & 0 deletions scss/mixins/_grid-framework.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,13 @@
flex-grow: 1;
max-width: 100%;
}

@for $i from 1 through $grid-row-columns {
.row-cols#{$infix}-#{$i} {
@include row-cols($i);
}
}

.col#{$infix}-auto {
flex: 0 0 auto;
width: auto;
Expand Down
12 changes: 12 additions & 0 deletions scss/mixins/_grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,3 +49,15 @@
$num: $size / $columns;
margin-left: if($num == 0, 0, percentage($num));
}

// Row columns
//
// Specify on a parent element(e.g., .row) to force immediate children into NN
// numberof columns. Supports wrapping to new lines, but does not do a Masonry
// style grid.
@mixin row-cols($count) {
& > * {
flex: 0 0 100% / $count;
max-width: 100% / $count;
}
}
133 changes: 132 additions & 1 deletion site/content/docs/4.3/components/card.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -601,6 +601,137 @@ 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 [`.row-cols` classes]({{< docsref "/layout/grid#row-columns" >}}) to control how many grid columns (wrapped around your cards) you show per row. For example, here's `.row-cols-md-2` splitting four cards to equal width across multiple rows, from the medium breakpoint up.

{{< example >}}
<div class="row row-cols-md-2">
<div class="col mb-4">
<div class="card">
{{< 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 mb-4">
<div class="card">
{{< 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 mb-4">
<div class="card">
{{< 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 mb-4">
<div class="card">
{{< 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 >}}

Change it to `.row-cols-3` and you'll see the fourth card wrap.

{{< example >}}
<div class="row row-cols-md-3">
<div class="col mb-4">
<div class="card">
{{< 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 mb-4">
<div class="card">
{{< 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 mb-4">
<div class="card">
{{< 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 mb-4">
<div class="card">
{{< 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 >}}

When you need equal height, add `.h-100` to the cards.

{{< example >}}
<div class="row row-cols-md-3">
<div class="col mb-4">
<div class="card h-100">
{{< 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 mb-4">
<div class="card h-100">
{{< 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 short card.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
{{< 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 mb-4">
<div class="card h-100">
{{< 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.
85 changes: 85 additions & 0 deletions site/content/docs/4.3/layout/grid.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -324,6 +324,91 @@ 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>

<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-6">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-1 row-cols-sm-2 row-cols-md-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>

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)
Expand Down