--- title: Cards menu: docs.cards description: 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 {% example html columns=1 %} {% include cards/card.html hide-options=true %} {% endexample %} ### Advanced card {% example html columns=1 %} {% include cards/card.html show-buttons=true show-footer=true %} {% endexample %} ### 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. {% example html columns=1 %} {% include cards/blog-single.html type="image" %} {% endexample %} ### 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. {% example html columns=3 %}
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.
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago