8 flex-direction: column;
9 min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
11 word-wrap: break-word;
12 background-color: $card-bg;
13 background-clip: border-box;
14 border: $card-border-width solid $card-border-color;
15 @include border-radius($card-border-radius);
24 border-bottom: inherit;
28 @include border-top-radius($card-inner-border-radius);
32 border-bottom-width: 0;
33 @include border-bottom-radius($card-inner-border-radius);
37 // Due to specificity of the above selector (`.card > .list-group`), we must
38 // use a child selector here to prevent double borders.
39 > .card-header + .list-group,
40 > .list-group + .card-footer {
46 // Enable `flex-grow: 1` for decks and groups so that card blocks take up
47 // as much space as possible, ensuring footers are aligned to the bottom.
49 // Workaround for the image size bug in IE
50 // See: https://github.com/twbs/bootstrap/pull/28855
52 padding: $card-spacer-x;
57 margin-bottom: $card-spacer-y;
61 margin-top: -$card-spacer-y / 2;
65 .card-text:last-child {
71 text-decoration: none;
75 margin-left: $card-spacer-x;
80 // Optional textual caps
84 padding: $card-spacer-y $card-spacer-x;
85 margin-bottom: 0; // Removes the default margin-bottom of <hN>
86 color: $card-cap-color;
87 background-color: $card-cap-bg;
88 border-bottom: $card-border-width solid $card-border-color;
91 @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
96 padding: $card-spacer-y $card-spacer-x;
97 color: $card-cap-color;
98 background-color: $card-cap-bg;
99 border-top: $card-border-width solid $card-border-color;
102 @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
112 margin-right: -$card-spacer-x / 2;
113 margin-bottom: -$card-spacer-y;
114 margin-left: -$card-spacer-x / 2;
119 margin-right: -$card-spacer-x / 2;
120 margin-left: -$card-spacer-x / 2;
130 padding: $card-img-overlay-padding;
131 @include border-radius($card-inner-border-radius);
137 flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396
138 width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
143 @include border-top-radius($card-inner-border-radius);
148 @include border-bottom-radius($card-inner-border-radius);
156 margin-bottom: $card-deck-margin;
159 @include media-breakpoint-up(sm) {
162 margin-right: -$card-deck-margin;
163 margin-left: -$card-deck-margin;
166 // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
168 margin-right: $card-deck-margin;
169 margin-bottom: 0; // Override the default
170 margin-left: $card-deck-margin;
181 // The child selector allows nested `.card` within `.card-group`
182 // to display properly.
184 margin-bottom: $card-group-margin;
187 @include media-breakpoint-up(sm) {
190 // The child selector allows nested `.card` within `.card-group`
191 // to display properly.
193 // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
202 // Handle rounded corners
203 @if $enable-rounded {
205 @include border-right-radius(0);
209 // stylelint-disable-next-line property-disallowed-list
210 border-top-right-radius: 0;
214 // stylelint-disable-next-line property-disallowed-list
215 border-bottom-right-radius: 0;
219 &:not(:first-child) {
220 @include border-left-radius(0);
224 // stylelint-disable-next-line property-disallowed-list
225 border-top-left-radius: 0;
229 // stylelint-disable-next-line property-disallowed-list
230 border-bottom-left-radius: 0;
245 margin-bottom: $card-columns-margin;
248 @include media-breakpoint-up(sm) {
249 column-count: $card-columns-count;
250 column-gap: $card-columns-gap;
255 display: inline-block; // Don't let them vertically span multiple columns
256 width: 100%; // Don't let their width change
267 overflow-anchor: none;
272 &:not(:last-of-type) {
274 @include border-bottom-radius(0);
277 &:not(:first-of-type) {
278 @include border-top-radius(0);
282 @include border-radius(0);
283 margin-bottom: -$card-border-width;