A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. Cards require a small amount of markup and classes to provide you with as much control as possible. These classes and markup are flexible though and can typically be remixed and extended with ease.
For same heighted cards in a row, add .match-height
class to
row.
if your card doesn't have any flush content like images, feel free to put the .card-body
class on
the .card
element to consolidate your markup.
Card Structure
<div class="card">
<div class="card-header">
<h4 class="card-title">Special title treatment</h4>
<div class="heading-elements">
<ul class="list-inline mb-0">
<li><a data-action="collapse"><i class="feather icon-minus"></i></a></li>
<li><a data-action="reload"><i class="feather icon-rotate-cw"></i></a></li>
<li><a data-action="expand"><i class="feather icon-maximize"></i></a></li>
<li><a data-action="close"><i class="feather icon-x"></i></a></li>
</ul>
</div>
</div>
<div class="card-content collapse show" aria-expanded="true">
<div class="card-body">
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card-footer">
<span class="text-muted">TPro</span>
</div>
</div>
Content Types
Cards support a wide variety of content, including images, text, list groups, links, and more. Mix and match multiple content types to create the card you need.
Some card options with class name and details :
Card Options | Class | Description |
---|---|---|
Card image top | .card-img-top |
Places an image to the top of the card. |
Card Title | .card-title |
Card titles are used by adding this class to a <h*> tag. |
Card Subtitle | .card-subtitle |
Subtitles are used by adding a .card-subtitle to an <h*> tag. If the .card-title and
the .card-subtitle items are placed in a .card-body item, the card title and
subtitle are aligned nicely. |
Cards Header | .card-header |
To add header to the card. |
Cards Footer | .card-footer |
To add footer to the card. |
Gradient Cards | .bg-gradient-* |
To add gradient background to the card. |
Outline variants | .border-* |
Replace the default modifier classes with this class to style just the border-color of a
card. |
Groups | .card-group |
Use card groups to render cards as a single, attached element with equal width and height columns. |
Decks | .card-deck-wrapper & .card-deck |
card decks require two wrapping elements: .card-deck-wrapper and a .card-deck.
We use table styles for the sizing and the gutters on .card-deck. The
.card-deck-wrapper is used to negative margin out the border-spacing on the
.card-deck . |
Columns | .card-columns |
Cards can be organized into Masonry-like columns with just CSS by wrapping them in
.card-columns . Cards are ordered from top to bottom and left to right when wrapped in
.card-columns . |
Type | URL |
---|---|
Bootstrap Link | https://getbootstrap.com/docs/4.3/components/card/ |