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.

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 data-feather="chevron-down"></i></a></li>
                <li><a data-action="reload"><i data-feather="rotate-cw"></i></a></li>
                <li><a data-action="close"><i data-feather="x"></i></a></li>
    <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 class="card-footer">
        <span class="text-muted">Vuexy</span>

Content Types

Card supports a wide variety of content including images, texts, 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 heading tag such as h1, h2, h3, h4, h5 or h6.
Card Subtitle .card-subtitle Subtitles are used by adding this class to a heading tag. If .card-title and .card-subtitle are placed in .card-body, the card title and subtitle are aligned nicely.
Card Header .card-header Use this class to add header to the card.
Card Body .card-body Use this class to add body to the card with proper padding inside the card.
Card Footer .card-footer Use this class to add footer to the card.
Gradient Cards .bg-gradient-{color}

Use this class to add gradient background color to the card.

color: {primary | secondary | success | danger | warning | info}

Outline variants .border-{color}

Use this class to add any border color to a card.

color: {primary | secondary | success | danger | warning | info}

Groups .card-group Use this class to render cards as a single, attached element with equal width and height columns.
Grid Cards .row-cols Use the Bootstrap grid system and its .row-cols classes to control how many grid columns (wrapped around your cards) you show per row.

Refer following links for detailed documentation, configuration options, methods and examples: