rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-30 22:52:24 +01:00
Code Issues Actions Packages Releases Activity

Variable card height (#29462)

Browse Source
This commit is contained in:
Martijn Cuppens 2019-10-03 09:21:40 +02:00 committed by XhmikosR
parent 91a9fd96b9
commit f47243460e
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

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

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

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