Cards

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

Examples

Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components.

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. This is easily customized with our various sizing options.

Card image cap

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card image cap

Inverse card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Example


<!-- Default card -->
<div class="card">
    <img class="card-img-top" src="path_to_image" alt="Card image cap">
    <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">Some quick example text....</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

<!-- Inverse card -->
<div class="card card-inverse">
    <img class="card-img-top" src="path_to_image" alt="Card image cap">
    <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">Some quick example text....</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

Content types

Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.

Body

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

This is some text within a card body.

Example


<div class="card">
    <div class="card-body">
        <p class="mb-0">This is some text within a card body.<p>
    </div>
</div>

Titles, text, and links

Card titles are used by adding .card-title to a <h*> tag. In the same way, links are added and placed next to each other by adding .card-link to an <a> tag.

Subtitles are used by adding a .card-subtitle to a <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.

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

Example


<div class="card">
    <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
        <p class="card-text">Some quick example text...</p>
        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
    </div>
</div>

Images

.card-img-top places an image to the top of the card. With .card-text, text can be added to the card. Text within .card-text can also be styled with the standard HTML tags.

Card image cap

Some quick example text to build on the card title and make up the bulk of the card's content.

Example


<div class="card">
    <img class="card-img-top" src="path_to_image" alt="Card image cap">
    <div class="card-body">
        <p class="card-text">Some quick example text...</p>
    </div>
</div>

Metadata

A card can contain content metadata.

Special title treatment
2 hrs ago

With supporting text below as a natural lead-in to additional content.

Go somewhere
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Special title treatment
2 hrs ago

With supporting text below as a natural lead-in to additional content.

Special title treatment

With supporting text below as a natural lead-in to additional content.

Example


<!-- Top-Left card -->
<div class="card">
    <div class="card-body">
        <h5 class="heading heading-5 strong-600">Special title treatment</h5>
        <h6 class="heading heading-sm strong-400 text-muted mb-4">
            2 hrs ago
        </h6>

        <p class="card-text">With supporting text below...</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

<!-- Top-Right card -->
<div class="card">
    <div class="card-body">
        <h5 class="heading heading-5 strong-600">Special title treatment</h5>
        <ul class="inline-links inline-links--style-3 mb-4">
            <li>
                <a href="#"><i class="fa fa-heart"></i> 50</a>
            </li>
            <li>
                <i class="fa fa-eye"></i> 750
            </li>
        </ul>

        <p class="card-text">With supporting text below...</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

<!-- Bottom-Left card -->
<div class="card">
    <div class="card-body">
        <h5 class="heading heading-5 strong-600">Special title treatment</h5>
        <h6 class="heading heading-sm strong-400 text-muted mb-4">
            2 hrs ago
        </h6>

        <p class="card-text">With supporting text below...</p>
    </div>
    <div class="card-footer">
        <div class="row flex flex-items-xs-middle">
            <div class="col text-right">
                <div class="block-author">
                    <div class="author-image author-image-xs">
                        <img src="path_to_image">
                    </div>
                    <div class="author-info">
                        David Wally
                    </div>
                </div>
            </div>

            <div class="col text-right text-xs-right">
                <ul class="inline-links inline-links--style-3">
                    <li>
                        <a href="#">
                            <i class="fa fa-heart"></i> 50
                        </a>
                    </li>
                    <li>
                        <i class="fa fa-eye"></i> 750
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Bottom-Right card -->
<div class="card">
    <div class="card-body">
        <h5 class="heading heading-5 strong-600">Special title treatment</h5>
        <ul class="inline-links inline-links--style-3 mb-4">
            <li>
                <a href="#"><i class="fa fa-heart"></i> 50</a>
            </li>
            <li>
                <i class="fa fa-eye"></i> 750
            </li>
        </ul>

        <p class="card-text">With supporting text below...</p>
    </div>
    <div class="card-footer">
        <div class="row align-items-center">
            <div class="col text-right">
                <div class="block-author">
                    <div class="author-image author-image-xs">
                        <img src="path_to_image">
                    </div>
                    <div class="author-info">
                        David Wally
                    </div>
                </div>
            </div>

            <div class="col text-right text-xs-right">
                <h6 class="heading heading-sm strong-400 text-muted mb-0">
                    2 hrs ago
                </h6>
            </div>
        </div>
    </div>
</div>

Actions

A card can contain a like, star or comment action. But you are not limited to these. Any icon can be transformed into an action. Use the .active class to toggle the active state of an action button.

Favorite post

With supporting text below as a natural lead-in to additional content.

Love post

With supporting text below as a natural lead-in to additional content.

Example


<!-- Favorite post -->
<div class="card">
    <div class="card-title">
        <div class="row align-items-center">
            <div class="col-8">
                <h4 class="heading heading-5 strong-600">Favorite post</h4>
            </div>
            <div class="col-4">
                <div class="card-icon-actions text-right">
                    <a href="#" class="favorite active" data-toggle="tooltip" data-original-title="Save to favorites"><i class="fa fa-star"></i></a>
                </div>
            </div>
        </div>
    </div>
    <div class="card-body">
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
        <div class="row align-items-center">
            <div class="col-6">
                <a href="#" class="btn btn-base-1">Action button</a>
            </div>
            <div class="col-6 text-right">
                <h6 class="heading heading-sm strong-400 text-muted mb-0">2 hrs ago</h6>
            </div>
        </div>
    </div>
</div>

<!-- Love post -->
<div class="card">
    <div class="card-title">
        <div class="row align-items-center">
            <div class="col-8">
                <h4 class="heading heading-5 strong-600">Favorite post</h4>
            </div>
            <div class="col-4">
                <div class="card-icon-actions text-right">
                <a href="#" class="favorite" data-toggle="tooltip" data-original-title="Save to favorites"><i class="fa fa-star"></i></a>
                    <a href="#" class="love active" data-toggle="tooltip" data-original-title="Love this"><i class="fa fa-heart"></i></a>
                </div>
            </div>
        </div>
    </div>
    <div class="card-body">
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
        <div class="row align-items-center">
            <div class="col-6">
                <a href="#" class="btn btn-base-1">Action button</a>
            </div>
            <div class="col-6 text-right">
                <h6 class="heading heading-sm strong-400 text-muted mb-0">2 hrs ago</h6>
            </div>
        </div>
    </div>
</div>

Comment box and actions

Also, you cand make use of the extended functionalities of a card like commenting, voting or liking posts.

Bettie Mavis New York, US
23 likes

With supporting text below as a natural lead-in to additional content.

Bettie Mavis New York, US
23 likes

With supporting text below as a natural lead-in to additional content.

Example


<div class="card">
    <div class="card-title">
        <div class="block-author">
            <div class="author-image author-image-sm">
                <img src="<?php echo $rp; ?>assets/images/prv/people/person-2.jpg" class="rounded-circle">
            </div>
            <div class="author-info">
                <span class="d-block heading heading-sm strong-500 mb-0"><?php echo $personNameF_1; ?></span>
                <span class="d-block text-sm strong-500">New York, US</span>
            </div>
        </div>
    </div>
    <div class="card-image">
        <img src="<?php echo $rp; ?>assets/images/prv/other/no-image-1.jpg">
    </div>
    <div class="card-body">
        <div class="row mb-1">
            <div class="col">
                <div class="card-icon-actions card-icon-actions-lg">
                    <a href="#" class="love"><i class="fa fa-heart-o"></i></a>
                    <a href="#" class=""><i class="fa fa-comment-o"></i></a>
                </div>
            </div>
            <div class="col">
                <div class="card-icon-actions card-icon-actions-lg text-right">
                    <a href="#" class=""><i class="fa fa-bookmark-o"></i></a>
                </div>
            </div>
        </div>
        <h6 class="heading heading-sm strong-600 mb-3">23 likes</h6>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
        <div class="row align-items-center">
            <div class="col-10">
                <form class="form-inline card-comment-box" role="form">
                    <textarea rows="1" class="form-control" placeholder="Add a comment..."></textarea>
                </form>
            </div>
            <div class="col-2 text-right">
                <div class="card-icon-actions card-icon-actions-lg">
                    <a href="#" class="love" data-toggle="dropdown" aria-expanded="false">
                        <i class="ion-ios-more"></i>
                    </a>
                    <div class="dropdown-menu py-0 text-center">
                        <a class="dropdown-item" href="#">Got to post</a>
                        <a class="dropdown-item" href="#">Repost inappropriate</a>
                        <a class="dropdown-item" href="#">Embed</a>
                        <a class="dropdown-item" href="#">Cancel</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

List groups

Create lists of content in a card with a flush list group.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros

Example


<div class="card">
    <ul class="list-group list-group-flush">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Vestibulum at eros</li>
    </ul>
</div>

Featured
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros

Example


<div class="card">
    <div class="card-header">
    Featured
    </div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Vestibulum at eros</li>
    </ul>
</div>

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

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Example


<div class="card">
    <div class="card-header">
        <h3 class="heading heading-5">Featured</h3>
    </div>
    <div class="card-body">
        <h4 class="card-title">Special title treatment</h4>
        <p class="card-text">With supporting text below...</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Example


<div class="card">
    <div class="card-header">
        <h3 class="heading heading-5">Quote</h3>
    </div>
    <div class="card-body">
        <blockquote class="blockquote mb-0">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <footer class="blockquote-footer">
                Someone famous in <cite title="Source Title">Source Title</cite>
            </footer>
        </blockquote>
    </div>
</div>

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Example


<div class="card text-center">
    <div class="card-header">
        <h3 class="heading heading-5">Featured</h3>
    </div>
    <div class="card-body">
        <h4 class="card-title">Special title treatment</h4>
        <p class="card-text">With supporting text below...</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
    <div class="card-footer text-muted">
        2 days ago
    </div>
</div>

Navigation

Add some navigation to a card’s header (or block) with Bootstrap’s nav components.

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Example


<div class="card text-center">
    <div class="card-header">
        <ul class="nav nav-tabs card-header-tabs">
            <li class="nav-item">
                <a class="nav-link active" href="#">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
    </div>
    <div class="card-body">
        <h4 class="card-title">Special title treatment</h4>
        <p class="card-text">With supporting text below...</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

Images

Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card image cap

Example


<!-- Image on top -->
<div class="card">
    <img class="card-img-top" src="path_to_image" alt="Card image cap">
    <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a wider card with supporting text...</p>
        <p class="card-text">
            <small class="text-muted">Last updated 3 mins ago</small>
        </p>
    </div>
</div>

<!-- Image on bottom -->
<div class="card">
    <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a wider card with supporting text...</p>
        <p class="card-text">
            <small class="text-muted">Last updated 3 mins ago</small>
        </p>
    </div>
    <img class="card-img-bottom" src="path_to_image" alt="Card image cap">
</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 additional styles or utilities.

You can vertically align the content using the modifier classes: .align-items-start, .align-items-center or .align-items-bottom. Also, you can horizontaly align the content using: .text-left, .text-center or .text-right.

Good to know: There are a few pre-defined masks using different opacity values. You can add masks with a light, dark or using the primary color as seen in the example below. Check out all the masks examples.
Card image

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card image

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Example


<div class="card bg-dark text-white">
    <img class="card-img" src="path_to_image" alt="Card image">
    <span class="mask mask-dark--style-2"></span>
    <div class="card-img-overlay d-flex align-items-center">
        <div class="col">
            <h4 class="heading heading-inverse heading-3 strong-600">Card title</h4>
            <p class="card-text c-gray-lighter">This is a wider card with supporting text below...</p>
            <p class="card-text c-gray-lighter">Last updated 3 mins ago</p>
        </div>
    </div>
</div>

Captions

You can choose from one of the custom styled card captions overlayed on any card image. You can horizontally align the content with the .text-left, .text-center or .text-right classes.

Style 1

Card title This is an overlay caption
Card title This is an overlay caption

Example


<div class="card">
    <div class="card-image">
        <a href="#">
            <img src="path_to_image">
        </a>
    </div>
    <div class="card-caption-overlay card-caption-overlay--1 card-caption-overlay--dark-gradient">
        <div class="block-info-inner">
            <div class="text-center">
                <a href="#" class="heading heading-4 strong-500 mb-0 c-white">Card title</a>
                <span class="clearfix"></span>
                <small class="text-uppercase c-white">This is an overlay caption</small>
            </div>
        </div>
    </div>
</div>

Style 2

Card title This is an overlay caption
Card title This is an overlay caption

Example


<!-- Light caption -->
<div class="card">
    <div class="card-image">
        <a href="#">
            <img src="path_to_image">
        </a>
    </div>
    <div class="card-caption-overlay card-caption-overlay--2">
        <div class="card-caption">
            <div class="text-center">
                <a href="#" class="heading heading-6 strong-500 mb-0">
                    Card title
                </a>
                <span class="clearfix"></span>
                <span class="text-sm">This is an overlay caption</span>
            </div>
        </div>
    </div>
</div>

<!-- Dark caption -->
<div class="card">
    <div class="card-image">
        <a href="#">
            <img src="path_to_image">
        </a>
    </div>
    <div class="card-caption-overlay card-caption-overlay--2 card-caption-overlay--dark">
        <div class="card-caption">
            <div class="text-center">
                <a href="#" class="heading heading-6 strong-500 mb-0">
                    Card title
                </a>
                <span class="clearfix"></span>
                <span class="text-sm">This is an overlay caption</span>
            </div>
        </div>
    </div>
</div>

Tip: For this caption style you can add a hover animation for displaying addition content. Just add the .card-caption-overlay--animated modifier class on the main caption container.
Card title This is an overlay caption

Lorem ipsum dolor sit amet consectetur adipiscing elit sed.

Card title This is an overlay caption

Lorem ipsum dolor sit amet consectetur adipiscing elit sed.

Style 3

Card title This is an overlay caption
Card title This is an overlay caption

Example


<!-- Light caption -->
<div class="card">
    <div class="card-image">
        <a href="#">
            <img src="path_to_image">
        </a>
    </div>
    <div class="card-caption-overlay card-caption-overlay--3">
        <div class="card-caption">
            <div class="text-center">
                <a href="#" class="heading heading-6 strong-500 mb-0">
                    Card title
                </a>
                <span class="clearfix"></span>
                <span class="text-sm">This is an overlay caption</span>
            </div>
        </div>
    </div>
</div>

<!-- Dark caption -->
<div class="card">
    <div class="card-image">
        <a href="#">
            <img src="path_to_image">
        </a>
    </div>
    <div class="card-caption-overlay card-caption-overlay--3 card-caption-overlay--dark">
        <div class="card-caption">
            <div class="text-center">
                <a href="#" class="heading heading-6 strong-500 mb-0">
                    Card title
                </a>
                <span class="clearfix"></span>
                <span class="text-sm">This is an overlay caption</span>
            </div>
        </div>
    </div>
</div>

Tip: For this caption style you can add a hover animation for displaying addition content. Just add the .card-caption-overlay--animated modifier class on the main caption container.
Card title This is an overlay caption

Lorem ipsum dolor sit amet consectetur adipiscing elit sed.

Card title This is an overlay caption

Lorem ipsum dolor sit amet consectetur adipiscing elit sed.

Styles

Cards include various options for customizing their backgrounds, borders, and color.

Background and color

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

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Other colors

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

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Example


<div class="card text-white bg-blue">
    <div class="card-header">Header</div>
    <div class="card-body">
        <h4 class="card-title">Primary card title</h4>
        <p class="card-text">Some quick example text...</p>
    </div>
</div>

Border

Use border utilities to change just the border-color of a card. Note that you can put .text-{color} classes on the parent .card or a subset of the card’s contents as shown below.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Example


<div class="card border-primary">
    <div class="card-header">Header</div>
    <div class="card-body">
        <h4 class="card-title">Primary card title</h4>
        <p class="card-text">Some quick example text...</p>
    </div>
</div>

Shadows

Use shadow utilities to change the depth of a card. You can use it by default or apply it only when the mouse hovers the card.

The modifier classes responsable for the card's depth styling are .z-depth-* with values from 1 to 5.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

To apply a shadow on any card when the mouse hovers it you just need to add .z-depth-*--hover with values from 1 to 5.
Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Example


<!-- Visible shadow all times -->
<div class="col-md-6">
    <div class="card--hover">
        <div class="card-header">Header</div>
        <div class="card-body">
            <h4 class="card-title">Primary card title</h4>
            <p class="card-text">Some quick example text to build...</p>
        </div>
    </div>
</div>

<!-- Visible shadow only on mouse hover -->
<div class="col-md-6">
    <div class="card--hover">
        <div class="card-header">Header</div>
        <div class="card-body">
            <h4 class="card-title">Primary card title</h4>
            <p class="card-text">Some quick example text...</p>
        </div>
    </div>
</div>

Card layout

In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards.

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.

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card image cap

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

Example


<div class="card-group">
    <div class="card">
        <img class="card-img-top" src="path_to_image" alt="Card image cap">
        <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">This is a wider card with supporting text below...</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
    </div>

    <div class="card">
        <img class="card-img-top" src="path_to_image" alt="Card image cap">
        <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">This card has supporting text below...</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
    </div>

    <div class="card">
        <img class="card-img-top" src="path_to_image" alt="Card image cap">
        <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">This is a wider card with supporting text below...</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
    </div>
</div>

When using card groups with footers, their content will automatically line up.

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card image cap

Card title

This card has supporting text below as a natural lead-in to additional content.

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Example


<div class="card-group">
    <div class="card">
        <img class="card-img-top" src="path_to_image" alt="Card image cap">
        <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
        </div>
    </div>

    <div class="card">
        <img class="card-img-top" src="path_to_image" alt="Card image cap">
        <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
        </div>
    </div>

    <div class="card">
        <img class="card-img-top" src="path_to_image" alt="Card image cap">
        <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
        </div>
    </div>
</div>

Card decks

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

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card image cap

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

Example


<div class="card-deck">
    <div class="card">
        <img class="card-img-top" src="path_to_image" alt="Card image cap">
        <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
        </div>
    </div>

    <div class="card">
        <img class="card-img-top" src="path_to_image" alt="Card image cap">
        <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
        </div>
    </div>

    <div class="card">
        <img class="card-img-top" src="path_to_image" alt="Card image cap">
        <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
        </div>
    </div>
</div>

Card columns

Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are built with CSS column properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.

For more advanced masonry layouts, filtering and sorting options check out the dedicated page.
Card image cap

Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Card image cap

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Someone famous in Source Title

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

Example


<div class="card-deck">
    <div class="card">
        <img class="card-img-top" src="path_to_image" alt="Card image cap">
        <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
        </div>
    </div>

    <div class="card">
        <img class="card-img-top" src="path_to_image" alt="Card image cap">
        <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
        </div>
    </div>

    <div class="card">
        <img class="card-img-top" src="path_to_image" alt="Card image cap">
        <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
        </div>
    </div>
</div>

Variables

Coming soon! This section will cover all you need to know about how to modify the Sass variables in order to customize the desired elements.