kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

Variable card height (#29462)

This commit is contained in:
Martijn Cuppens 2019-10-03 09:21:40 +02:00 committed by GitHub
parent f6a1e2fc89
commit 03c9788f7a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 3 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
scss/_card.scss
View File

@ -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;

1
scss/_variables.scss
View File

@ -840,6 +840,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;

2
site/content/docs/4.3/components/card.md
View File

@ -689,7 +689,7 @@ Change it to `.row-cols-3` and you'll see the fourth card wrap.
</div>
{{< /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.
{{< example >}}
<div class="row row-cols-1 row-cols-md-3">