diff options
| author | Martijn Cuppens <[email protected]> | 2019-10-03 09:21:40 +0200 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2019-10-14 12:12:05 +0300 |
| commit | f47243460e58a56a2bad9ab852abe2ae47bdf5b8 (patch) | |
| tree | 061b7f483482b140eb35df3d78c30371e5e61728 | |
| parent | 91a9fd96b9181fc1657360a2a46fc64877d22dfa (diff) | |
| download | bootstrap-f47243460e58a56a2bad9ab852abe2ae47bdf5b8.tar.xz bootstrap-f47243460e58a56a2bad9ab852abe2ae47bdf5b8.zip | |
Variable card height (#29462)
| -rw-r--r-- | scss/_card.scss | 1 | ||||
| -rw-r--r-- | scss/_variables.scss | 1 | ||||
| -rw-r--r-- | site/docs/4.3/components/card.md | 2 |
3 files changed, 3 insertions, 1 deletions
diff --git a/scss/_card.scss b/scss/_card.scss index fdbe95f40..c23568f37 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -7,6 +7,7 @@ display: flex; flex-direction: column; min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106 + height: $card-height; word-wrap: break-word; background-color: $card-bg; background-clip: border-box; diff --git a/scss/_variables.scss b/scss/_variables.scss index 3a1917ada..6850b23b5 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -834,6 +834,7 @@ $card-border-color: rgba($black, .125) !default; $card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default; $card-cap-bg: rgba($black, .03) !default; $card-cap-color: null !default; +$card-height: null !default; $card-color: null !default; $card-bg: $white !default; diff --git a/site/docs/4.3/components/card.md b/site/docs/4.3/components/card.md index 14a6302c1..cb1301b82 100644 --- a/site/docs/4.3/components/card.md +++ b/site/docs/4.3/components/card.md @@ -711,7 +711,7 @@ Change it to `.row-cols-3` and you'll see the fourth card wrap. {% endcapture %} {% include example.html content=example %} -When you need equal height, add `.h-100` to the cards. +When you need equal height, add `.h-100` to the cards. If you want equal heights by default, you can set `$card-height: 100%` in Sass. {% capture example %} <div class="row row-cols-1 row-cols-md-3"> |