Cards
Widget Page
Blog
Card with Aspect Ratio
Use classes
aspect-ratio-item-top-left,aspect-ratio-item-top-right,aspect-ratio-item-bottom-right, oraspect-ratio-item-top-leftto position other components relative to the corners inside theaspect-ratiocomponent.
Horizontal Card with autofit-col-*
Use
card-rowwithautofit-col-expandandautofit-colto create a number of custom horizontal cards.autofit-col-expandfills the remaining space andautofit-colis only as wide as its content inside.<div class="card-row"> <div class="autofit-col"> <section class="autofit-section"></section> </div> <div class="autofit-col autofit-col-expand"> <section class="autofit-section"></section> </div> </div>
Two
.autofit-col's no.autofit-col-expand.<div class="card-row"> <div class="autofit-col"> <section class="autofit-section"></section> </div> <div class="autofit-col"> <section class="autofit-section"></section> </div> </div>
Two
.autofit-col-expand's no.autofit-col.<div class="card-row"> <div class="autofit-col autofit-col-expand"> <section class="autofit-section"></section> </div> <div class="autofit-col autofit-col-expand"> <section class="autofit-section"></section> </div> </div>
Padded Horizontal Cards
Nest
card-rowincard-bodyon to add some spacing around a horizontal card.<div class="card-body"> <div class="card-row"></div> </div>
Card Row Content Alignment Helpers
Vertically align content by setting
justify-contenttoflex-start,center, orflex-endonautofit-col.Horizontally align content by setting
text-aligntoleft,center, orrightonautofit-col.You can also use the Bootstrap 4's helper classes
justify-content-start,justify-content-center, orjustify-content-endoncard-rowto align content in all columns inside the row.
Add gutters to a specific card card column by using the class
autofit-col-gutters.
Card Helper Classes
Use classes
rounded,rounded-circle, orrounded-0on the card to quickly shape the borders.
Use classes
card-item-firstandcard-item-laston elements that appear at the beginning or ending of your card. It styles the border-radius to match the card's border-radius. These classes work similar to Bootstrap 4's.card-img-topand.card-img-bottombut also covers left and right.
Joe Bloggs
Administrator
Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.
Card Dividers
Use
<div class="card-divider"></div>to create a horizontal division between content inside a card.
Clickable Checkbox Card
To make the whole card clickable just wrap the checkbox and card in:
<div class="form-check form-check-card form-check-top-left">
<label class="form-check-label">
<input class="form-check-input" type="checkbox">
<div class="card">...</div>
</label>
</div>Clickable Radio Card
To make the whole card clickable just wrap the radio input and card in:
<div class="form-check form-check-card form-check-top-left">
<label class="form-check-label">
<input class="form-check-input" type="radio">
<div class="card">...</div>
</label>
</div>Checkbox Card
We have created a pattern to add checkboxes to cards, just wrap the checkbox and card in:
<div class="form-check form-check-card form-check-top-left">
<label class="form-check-label">
<input class="form-check-input" type="checkbox">
</label>
<div class="card">...</div>
</div>active class when the input is checked/unchecked.
Radio Card
We have created a pattern to add radio inputs to cards, just wrap the radio input and card in:
<div class="form-check form-check-card form-check-top-left">
<label class="form-check-label">
<input class="form-check-input" type="radio">
</label>
<div class="card">...</div>
</div>active class when the input is checked/unchecked.