Documentation
Cards
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.
The .card element is simply a container with a shadow, a border, a radius, and some padding. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components.
Default card
To create a new card you have to use the .card and .card-body classes. You can put any content inside.
This is some text within a card body.
<div class="card">
<div class="card-body">
<p>This is some text within a card body.</p>
</div>
</div>Card padding
You can change the padding of a newly created card. You can do this with the .card-sm, .card-md and .card-lg classes.
Cards with the .card-sm class are very well suited for small items such as snippets, etc., while .card-lg can be used for large blocks of text. On small devices, padding will automatically be reduced to fit on the screen.
This is some text within a card body.
This is some text within a card body.
This is some text within a card body.
This is some text within a card body.
<div class="card card-sm">
<div class="card-body">
<p>This is some text within a card body.</p>
</div>
</div>
<div class="card">
<div class="card-body">
<p>This is some text within a card body.</p>
</div>
</div>
<div class="card card-md">
<div class="card-body">
<p>This is some text within a card body.</p>
</div>
</div>
<div class="card card-lg">
<div class="card-body">
<p>This is some text within a card body.</p>
</div>
</div>Card with title
To add a title to a card you should add a class .card-title inside .card-body.
You can also place the title inside the .card-header element - then the title will be separated from the content by a horizontal line.
Card title
This is some text within a card body.
Card title
This is some text within a card body.
<div class="card">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<p>This is some text within a card body.</p>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">Card title</h3>
</div>
<div class="card-body">
<p>This is some text within a card body.</p>
</div>
</div>Card with title and image
Card with title and image
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
<div class="card">
<img src="..." class="card-img-top" alt="Card top image">
<div class="card-body">
<h3 class="card-title">Card with title and image</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
</div>
</div>Blog post card
The best way to make your post eye-catching is adding an image to it. To do so, just add the image with the .card-img-top class. We’ve added the .d-flex .flex-column classes to the .card-body to have the author details be on the bottom of the card.
How do you know she is a witch?
<div class="card d-flex flex-column">
<a href="#">
<img class="card-img-top" src="..." alt="How do you know she is a witch?">
</a>
<div class="card-body d-flex flex-column">
<h3 class="card-title"><a href="#">How do you know she is a witch?</a></h3>
<div class="text-muted">Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...</div>
<div class="d-flex align-items-center pt-5 mt-auto">
<span class="avatar avatar-md" style="background-image: url(...)"></span>
<div class="ml-3">
<a href="#" class="text-body">Maryjo Lebarree</a>
<small class="d-block text-muted">3 days ago</small>
</div>
<div class="ml-auto">
<a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
<!-- SVG icon code -->
</a>
</div>
</div>
</div>
</div>Row deck
If you want to create a couple of posts next to each other, add the .row-deck class to .row—then they will all have the same height.
<div class="row row-deck">
<div class="col-md-4">
<div class="card">
<div class="card-body">Short content</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">Extra long content of card. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">Short content</div>
</div>
</div>
</div>Post card with aside image
You can also add the image on the left side of the card. All you need do to is: add the .card-aside class to the element with the .card class. Then add the image in the .card-aside-column element. No worries, tabler will automatically center it and scale to right size:
Shut up!
<div class="card d-flex flex-column">
<div class="row row-0 flex-fill">
<div class="col-md-3">
<a href="#">
<img src="..." class="w-100 h-100 object-cover" alt="Card side image">
</a>
</div>
<div class="col">
<div class="card-body">
<h3 class="card-title"><a href="#">Shut up!</a></h3>
<div class="text-muted">Burn her! How do you know she is a witch? You don't frighten us, English pig-dogs! Go and boil yo...</div>
<div class="d-flex align-items-center pt-5 mt-auto">
<span class="avatar avatar-md" style="background-image: url(...)"></span>
<div class="ml-3">
<a href="#" class="text-body">Egan Poetz</a>
<small class="d-block text-muted">3 days ago</small>
</div>
<div class="ml-auto">
<a href="#" class="icon d-none d-md-inline-block ml-3 text-red">
<!-- SVG icon code -->
</a>
</div>
</div>
</div>
</div>
</div>
</div>Color variations
Card with top status
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
Card with side status
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
<div class="row row-deck">
<div class="col-md-6">
<div class="card">
<div class="card-status-top bg-danger"></div>
<div class="card-body">
<h3 class="card-title">Card with top status</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-status-left bg-green"></div>
<div class="card-body">
<h3 class="card-title">Card with side status</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
</div>
</div>
</div>
</div>Stacked card
Stacked card
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
<div class="card card-stacked">
<div class="card-body">
<h3 class="card-title">Stacked card</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
</div>
</div>Tabbed card
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
<!-- Cards with tabs component -->
<div class="card-tabs">
<!-- Cards navigation -->
<ul class="nav nav-tabs">
<li class="nav-item"><a href="#tab-top-1" class="nav-link active" data-toggle="tab">Tab 1</a></li>
<li class="nav-item"><a href="#tab-top-2" class="nav-link" data-toggle="tab">Tab 2</a></li>
<li class="nav-item"><a href="#tab-top-3" class="nav-link" data-toggle="tab">Tab 3</a></li>
<li class="nav-item"><a href="#tab-top-4" class="nav-link" data-toggle="tab">Tab 4</a></li>
</ul>
<div class="tab-content">
<!-- Content of card #1 -->
<div id="tab-top-1" class="card tab-pane active show">
<div class="card-body">
<div class="card-title">Content of tab #1</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
</p>
</div>
</div>
<!-- Content of card #2 -->
<div id="tab-top-2" class="card tab-pane">
<div class="card-body">
<div class="card-title">Content of tab #2</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
</p>
</div>
</div>
<!-- Content of card #3 -->
<div id="tab-top-3" class="card tab-pane">
<div class="card-body">
<div class="card-title">Content of tab #3</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
</p>
</div>
</div>
<!-- Content of card #4 -->
<div id="tab-top-4" class="card tab-pane">
<div class="card-body">
<div class="card-title">Content of tab #4</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
</p>
</div>
</div>
</div>
</div>