Card Documetation


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 has no 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="ft-minus"></i></a></li>
                                    <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                                    <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                                    <li><a data-action="close"><i class="ft-x"></i></a></li>
                        <div class="card-content" 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 class="card-footer">
                            <span class="text-muted">ABCD</span>
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 links .card-link To add links to the card links.
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.
Background variants .text-white Cards include their own variant classes for quickly changing the background-color and border-color of a card. Darker colors require the use of this class.
Border variants .border-[top/right/bottom/left]-* or .border-* Cards include border variant classes for changing the border-color of a card.
Border sizing .border-[top/right/bottom/left]-[1/2/3] Border sizes in px. Use this class with .border-[top/left/right/bottom]-* class.
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.

Card Actions

All cards have actions like minimize, refresh, expand, close/cancel for each card in card header.

Action Options Class Description
Collapse data-action="collapse" Using this action, you can toggle the card.
Reload data-action="reload" This action is used to reload card.
Expand data-action="expand" Use this option to expand card.
Close data-action="close" Use this option to close this card.

Card Background Gradient Variants

Cards include their own variant classes for quickly changing the background-color and border-color of a card. Darker colors require the use of text-white.

Gradient Options Class Description
Horizontal Gradient .bg-gradient-x-* For background horizontal gradient.
Vertical Gradient .bg-gradient-y-* For background vertical gradient.
Three Colors Horizontal Gradient .bg-gradient-x2-* For three colors horizontal gradient cards.
Three Colors Vertical Gradient .bg-gradient-v2-* For three colors vertical gradient cards.
Directional Gradient .bg-gradient-directional-* For directional gradient cards.
Radial Gradient .bg-gradient-radial-* For radial gradient cards.
Striped Gradient .bg-gradient-striped-* For striped gradient cards.