6 // scss-docs-start card-css-vars
7 --#{$prefix}card-spacer-y: #{$card-spacer-y};
8 --#{$prefix}card-spacer-x: #{$card-spacer-x};
9 --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
10 --#{$prefix}card-border-width: #{$card-border-width};
11 --#{$prefix}card-border-color: #{$card-border-color};
12 --#{$prefix}card-border-radius: #{$card-border-radius};
13 --#{$prefix}card-box-shadow: #{$card-box-shadow};
14 --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
15 --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
16 --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
17 --#{$prefix}card-cap-bg: #{$card-cap-bg};
18 --#{$prefix}card-cap-color: #{$card-cap-color};
19 --#{$prefix}card-height: #{$card-height};
20 --#{$prefix}card-color: #{$card-color};
21 --#{$prefix}card-bg: #{$card-bg};
22 --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
23 --#{$prefix}card-group-margin: #{$card-group-margin};
24 // scss-docs-end card-css-vars
28 flex-direction: column;
29 min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
30 height: var(--#{$prefix}card-height);
31 word-wrap: break-word;
32 background-color: var(--#{$prefix}card-bg);
33 background-clip: border-box;
34 border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
35 @include border-radius(var(--#{$prefix}card-border-radius));
36 @include box-shadow(var(--#{$prefix}card-box-shadow));
45 border-bottom: inherit;
49 @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
53 border-bottom-width: 0;
54 @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
58 // Due to specificity of the above selector (`.card > .list-group`), we must
59 // use a child selector here to prevent double borders.
60 > .card-header + .list-group,
61 > .list-group + .card-footer {
67 // Enable `flex-grow: 1` for decks and groups so that card blocks take up
68 // as much space as possible, ensuring footers are aligned to the bottom.
70 padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x);
71 color: var(--#{$prefix}card-color);
75 margin-bottom: var(--#{$prefix}card-title-spacer-y);
79 margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
83 .card-text:last-child {
89 text-decoration: if($link-hover-decoration == underline, none, null);
93 margin-left: var(--#{$prefix}card-spacer-x);
98 // Optional textual caps
102 padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
103 margin-bottom: 0; // Removes the default margin-bottom of <hN>
104 color: var(--#{$prefix}card-cap-color);
105 background-color: var(--#{$prefix}card-cap-bg);
106 border-bottom: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
109 @include border-radius(var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius) 0 0);
114 padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
115 color: var(--#{$prefix}card-cap-color);
116 background-color: var(--#{$prefix}card-cap-bg);
117 border-top: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
120 @include border-radius(0 0 var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius));
130 margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
131 margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list
132 margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
136 background-color: var(--#{$prefix}card-bg);
137 border-bottom-color: var(--#{$prefix}card-bg);
142 margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
143 margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
153 padding: var(--#{$prefix}card-img-overlay-padding);
154 @include border-radius(var(--#{$prefix}card-inner-border-radius));
160 width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
165 @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
170 @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
179 // The child selector allows nested `.card` within `.card-group`
180 // to display properly.
182 margin-bottom: var(--#{$prefix}card-group-margin);
185 @include media-breakpoint-up(sm) {
188 // The child selector allows nested `.card` within `.card-group`
189 // to display properly.
191 // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
200 // Handle rounded corners
201 @if $enable-rounded {
203 @include border-end-radius(0);
207 // stylelint-disable-next-line property-disallowed-list
208 border-top-right-radius: 0;
212 // stylelint-disable-next-line property-disallowed-list
213 border-bottom-right-radius: 0;
217 &:not(:first-child) {
218 @include border-start-radius(0);
222 // stylelint-disable-next-line property-disallowed-list
223 border-top-left-radius: 0;
227 // stylelint-disable-next-line property-disallowed-list
228 border-bottom-left-radius: 0;