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
Card title
<div class="card">
<div class="card-header">
<h3 class="card-title">Card title</h3>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
</div>
</div>
Advanced card
Card title
<div class="card">
<div class="card-header">
<h3 class="card-title">Card title</h3>
<div class="card-options">
<a class="btn btn-secondary btn-sm">Action 1</a>
<a class="btn btn-secondary btn-sm ml-2">Action 2</a>
</div>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
</div>
<div class="card-footer">
This is standard card footer
</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.
![And this isn't my nose. This is a false one.](../assets/images/photos/david-klaasen-54203-500.jpg)
And this isn't my nose. This is a false one.
<div class="card">
<a href="#"><img class="card-img-top" src="./assets/images/photos/david-klaasen-54203-500.jpg" alt="And this isn't my nose. This is a false one."></a>
<div class="card-body d-flex flex-column">
<h4><a href="#">And this isn't my nose. This is a false one.</a></h4>
<div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
<div class="d-flex align-items-center pt-5 mt-auto">
<div class="avatar avatar-md mr-3" style="background-image: url(./assets/images/faces/female/18.jpg)"></div>
<div>
<a href="./profile.html" class="text-default">Rose Bradley</a>
<small class="d-block text-muted">3 days ago</small>
</div>
<div class="ml-auto text-muted">
<a href="#" class="icon d-none d-md-inline-block ml-3"><i class="fe fe-heart mr-1"></i></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-cards 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:
And this isn't my nose. This is a false one.
<div class="card card-aside">
<a href="#" class="card-aside-column" style="background-image: url(./assets/images/photos/david-klaasen-54203-500.jpg)"></a>
<div class="card-body d-flex flex-column">
<h4><a href="#">And this isn't my nose. This is a false one.</a></h4>
<div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
<div class="d-flex align-items-center pt-5 mt-auto">
<div class="avatar avatar-md mr-3" style="background-image: url(./assets/images/faces/female/18.jpg)"></div>
<div>
<a href="./profile.html" class="text-default">Rose Bradley</a>
<small class="d-block text-muted">3 days ago</small>
</div>
<div class="ml-auto text-red">
<a href="#" class="icon d-none d-md-inline-block ml-3"><i class="fe fe-heart mr-1"></i></a>
</div>
</div>
</div>
</div>
Color variations
Card status
Card status on left side
<div class="row row-cards row-deck">
<div class="col-md-6">
<div class="card">
<div class="card-status bg-purple"></div>
<div class="card-header">
<h3 class="card-title">Card status</h3>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-status card-status-left bg-blue"></div>
<div class="card-header">
<h3 class="card-title">Card status on left side</h3>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
</div>
</div>
</div>
</div>
Card with switch
Card with switch
<div class="card">
<div class="card-header">
<h3 class="card-title">Card with switch</h3>
<div class="card-options">
<label class="custom-switch m-0">
<input type="checkbox" value="1" class="custom-switch-input" checked>
<span class="custom-switch-indicator"></span>
</label>
</div>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
</div>
</div>
Card with loader
Card with loader
<div class="card">
<div class="card-header">
<h3 class="card-title">Card with loader</h3>
</div>
<div class="card-body">
<div class="dimmer active">
<div class="loader"></div>
<div class="dimmer-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
</div>
</div>
</div>
</div>