8 flex-direction: column;
9 background-color: $card-bg;
10 border: $card-border-width solid $card-border-color;
11 @include border-radius($card-border-radius);
15 // Enable `flex-grow: 1` for decks and groups so that card blocks take up
16 // as much space as possible, ensuring footers are aligned to the bottom.
18 padding: $card-spacer-x;
22 margin-bottom: $card-spacer-y;
26 margin-top: -($card-spacer-y / 2);
30 .card-text:last-child {
36 text-decoration: none;
40 margin-left: $card-spacer-x;
45 > .list-group:first-child {
46 .list-group-item:first-child {
47 @include border-top-radius($card-border-radius);
51 > .list-group:last-child {
52 .list-group-item:last-child {
53 @include border-bottom-radius($card-border-radius);
60 // Optional textual caps
64 padding: $card-spacer-y $card-spacer-x;
65 margin-bottom: 0; // Removes the default margin-bottom of <hN>
66 background-color: $card-cap-bg;
67 border-bottom: $card-border-width solid $card-border-color;
70 @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0);
75 padding: $card-spacer-y $card-spacer-x;
76 background-color: $card-cap-bg;
77 border-top: $card-border-width solid $card-border-color;
80 @include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner);
90 margin-right: -($card-spacer-x / 2);
91 margin-bottom: -$card-spacer-y;
92 margin-left: -($card-spacer-x / 2);
97 margin-right: -($card-spacer-x / 2);
98 margin-left: -($card-spacer-x / 2);
103 // Background variations
107 @include card-variant($brand-primary, $brand-primary);
110 @include card-variant($brand-success, $brand-success);
113 @include card-variant($brand-info, $brand-info);
116 @include card-variant($brand-warning, $brand-warning);
119 @include card-variant($brand-danger, $brand-danger);
122 // Remove all backgrounds
123 .card-outline-primary {
124 @include card-outline-variant($btn-primary-bg);
126 .card-outline-secondary {
127 @include card-outline-variant($btn-secondary-border);
130 @include card-outline-variant($btn-info-bg);
132 .card-outline-success {
133 @include card-outline-variant($btn-success-bg);
135 .card-outline-warning {
136 @include card-outline-variant($btn-warning-bg);
138 .card-outline-danger {
139 @include card-outline-variant($btn-danger-bg);
143 // Inverse text within a card for use with dark backgrounds
147 @include card-inverse;
162 // margin: -1.325rem;
163 @include border-radius($card-border-radius-inner);
171 padding: $card-img-overlay-padding;
178 @include border-top-radius($card-border-radius-inner);
181 @include border-bottom-radius($card-border-radius-inner);
187 @include media-breakpoint-up(sm) {
195 flex-direction: column;
197 // Selectively apply horizontal margins to cards to avoid doing the
198 // negative margin dance like our grid. This differs from the grid
199 // due to the use of margins as gutters instead of padding.
200 &:not(:first-child) { margin-left: $card-deck-margin; }
201 &:not(:last-child) { margin-right: $card-deck-margin; }
211 @include media-breakpoint-up(sm) {
224 // Handle rounded corners
225 @if $enable-rounded {
227 @include border-right-radius(0);
230 border-top-right-radius: 0;
233 border-bottom-right-radius: 0;
237 @include border-left-radius(0);
240 border-top-left-radius: 0;
243 border-bottom-left-radius: 0;
247 &:not(:first-child):not(:last-child) {
265 @include media-breakpoint-up(sm) {
267 column-count: $card-columns-count;
268 column-gap: $card-columns-gap;
271 display: inline-block; // Don't let them vertically span multiple columns
272 width: 100%; // Don't let their width change
273 margin-bottom: $card-columns-margin;