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.
Note! For same height cards in a row, add
.match-height class to
If your card doesn't have any flush content like images, feel free to put the
.card-body class inside the
.card element to consolidate your markup.
<div class="card"> <div class="card-header"> <h4 class="card-title">Special title treatment</h4> </div> <div class="card-content"> <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">Apex</span> </div> </div>
Bootstrap card supports a wide varieties of content including images, text, list groups, links, and much more. Mix and match multiple content types to create the card you need.
Some card options with class name and details are as follows:
|Card image on top||
||Use mentioned class inside wrapper of
||Card titles are used by adding this class to a
||Subtitles are used by adding a
||To add header to the card.|
||To add footer to the card.|
||Wrap cards inside mentioned class to render cards as a single, attached element with equal width and height columns.|
||Card require wrapping elements:
||Cards can be organized into Masonry-like columns with just CSS by wrapping them in
||Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.|
Refer following links for detailed documentation, configuration options, methods and examples:
|Card Template Page||path-to-apex-page/cards-basic.html|