Horizontal Card with autofit-col-*
Use card-row with autofit-col-expand and autofit-col to create a number of custom horizontal cards. autofit-col-expand fills the remaining space, and autofit-col matches the width of its content.
<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>The example below only uses two .autofit-cols.
<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>The example below only uses two .autofit-col-expands.
<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 a card-row element inside a card-body element to add some spacing around a horizontal card.
<div class="card-body">
<div class="card-row"></div>
</div>
Truncating Text Inside Card
Add the text-truncate class to text elements to truncate their text.
Card Row Content Alignment Helpers
Vertically align content by setting justify-content to flex-start, center, or flex-end on autofit-col.
Horizontally align content by setting text-align to left, center, or right on autofit-col.
You can also use Bootstrap 4's helper classes justify-content-start, justify-content-center, or justify-content-end on card-row elements to align content in the row's columns.
Add the autofit-col-gutters class to a card column to add gutters to it.
Card Helper Classes
Use the rounded, rounded-circle, or rounded-0 classes on the card to quickly shape the borders.
To style the border-radius to match the card's border-radius, add the card-item-first and card-item-last classes to elements that appear at the beginning or end of the card, respectively. These classes work similar to Bootstrap 4's .card-img-top and .card-img-bottom classes, but they also cover the left and right.
Joe Bloggs
Administrator
Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.
Card Dividers
Use `` to create a horizontal division between content inside a card.
Clickable Checkbox Card
To make the whole card clickable, Wrap the checkbox and card in the markup shown below:
<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, wrap the radio input and card in the markup shown below:
<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
Follow the pattern below to add checkboxes to cards:
active class when the input is checked/unchecked.
<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>Radio Card
Follow the pattern below to add radio inputs to cards:
active class when the input is checked/unchecked.
<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>