Cards

Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.

Page Demo Bootstrap Doc

Basic example

Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element.

<div class="card">
    <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <h6 class="card-subtitle">Praesent commodo cursus magna scelerisque consectetur.</h6>

        <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui.</p>
    </div>
</div>

Card Inverse

Use .card--inverse class to turn the card in to dark.

<div class="card card--inverse">
    <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <h6 class="card-subtitle">Praesent commodo cursus magna scelerisque consectetur.</h6>

        <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui.</p>
    </div>
</div>

Card with Actions

Cards can also contains action links in icon format.

<div class="card">
    <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <h6 class="card-subtitle">Praesent commodo cursus magna scelerisque consectetur.</h6>

        <div class="actions">
            <a href="" class="actions__item zmdi zmdi-trending-up"></a>
            <a href="" class="actions__item zmdi zmdi-check-all"></a>

            <div class="dropdown actions__item">
                <i data-toggle="dropdown" class="zmdi zmdi-more-vert"></i>
                <div class="dropdown-menu dropdown-menu-right">
                    <a href="" class="dropdown-item">Refresh</a>
                    <a href="" class="dropdown-item">Manage Widgets</a>
                    <a href="" class="dropdown-item">Settings</a>
                </div>
            </div>
        </div>

        <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui.</p>
    </div>
</div>

Body

The building block of a card is the .card-body. Use it whenever you need a padded section within a card.

<div class="card">
    <div class="card-body">
        <p class="card-text">Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>
</div>

Card Links

Links are added and placed next to each other by adding .card-link to a <a> tag.

<div class="card">
    <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <h6 class="card-subtitle">Praesent commodo cursus magna scelerisque consectetur</h6>

        <p class="card-text">Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>

        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
    </div>
</div>

Header and Footer

Add an optional header and/or footer within a card.

<div class="card">
    <div class="card-header">Card Header</div>

    <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <h6 class="card-subtitle">Praesent commodo cursus magna scelerisque consectetur.</h6>

        <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui.</p>
    </div>

    <div class="card-footer">Card Footer</div>
</div>

Images

Cards can also include images in the top and bottom.

<!-- Image on top -->
<div class="card">
    <img class="card-img-top" src="image-path">

    <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <h6 class="card-subtitle">Praesent commodo cursus magna scelerisque consectetur</h6>

        <p class="card-text">Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>
</div>

<!-- Image on bottom -->
<div class="card">
    <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <h6 class="card-subtitle">Praesent commodo cursus magna scelerisque consectetur</h6>

        <p class="card-text">Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>

    <img class="card-img-bottom" src="image-path">
</div>

Image Overlays

Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need .card--inverse

<div class="card card--inverse">
    <img class="card-img" src="image-path">

    <div class="card-img-overlay">
        <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <h6 class="card-subtitle">Praesent commodo cursus magna scelerisque consectetur</h6>

            <p class="card-text">Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
        </div>
    </div>
</div>

Background and Color

Use text and background utilities to change the appearance of a card.

<div class="card bg-blue card--inverse">
    ...
</div>

<div class="card bg-red card--inverse">
    ...
</div>

<div class="card bg-green card--inverse">
    ...
</div>

Card Groups

Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use display: flex; to achieve their uniform sizing.

<div class="card-group">
    <div class="card">
        <!-- Card Contents -->
    </div>

    <div class="card">
        <!-- Card Contents -->
    </div>

    <div class="card">
        <!-- Card Contents -->
    </div>
</div>

Card Decks

Need a set of equal width and height cards that aren’t attached to one another? Use card decks.

<div class="card-deck">
    <div class="card">
        <!-- Card Contents -->
    </div>

    <div class="card">
        <!-- Card Contents -->
    </div>

    <div class="card">
        <!-- Card Contents -->
    </div>
</div>

Requirements:

  • /scss/inc/bootstrap-overrides/_cards.scss