--- title: Cards description: Cards are flexible user interface elements, which help organize content into meaningful sections and make it easier to display on different screen sizes. Cards contain various smaller components, such as images, text, links and buttons and may act as an entry to more detailed information, helping users scan the page quickly and find the most relevant content. bootstrapLink: components/card/ --- ## Table of contents ## Default card Use the `.card` and `.card-body` classes to create a card and use it as the basis for a more advanced card design. A card is a perfect way to organize content and make it look neat and tidy. ```html example code centered columns={1}

This is some text within a card body.

``` ## Card padding You can change the padding of a newly created card. To do it, use the `.card-sm`, `.card-md` or `.card-lg` classes. Cards with the `.card-sm` class are well suited for small items such as widgets, etc., while the `.card-lg` class can be used for large blocks of text. Padding will be automatically reduced on small devices, to fit the screen size. ```html example vertical centered separated height={500}

This is some text within a card body.

``` ```html

...

``` ## Card with title Add a title to your card by including the `.card-title` class within `.card-body`. You can also place the title inside the `.card-header` element to separate the title from the content with a horizontal line. ```html code example vertical centered separated height={400}

Card title

This is some text within a card body.

Card title

This is some text within a card body.

``` ## Card with title and image To create a more visually appealing card, add a title and an image. Thanks to that, the card will go well with your interface design and draw users' attention. ```html example centered columns={1} height={500} code

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.

``` ## Blog post card Add an image to your blog post card to make it eye-catching. You can do it by adding the image in the `.card-img-top` class. Thanks to the `.d-flex` and `.flex-column` classes within `.card-body`, the author details will be displayed at the bottom of the card. ```html example centered columns={1} height={600} code

How do you know she is a witch?

Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...

Maryjo Lebarree

3 days ago

``` ## Row deck Add the `.row-deck` class to `.row`, if you want to display several cards next to one another. Thanks to that, they will all have the same height. ```html code example centered

Short content

Extra long content of card. Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Short content

``` ## Post card with aside image You can also add an image on the left side of the card. To do it, add the `.card-aside` class to the element with the `.card` class. Then add the image in the `.card-aside-column` element and it will be automatically centered and scaled to the right size. ```html example columns={2} centered height={400} code

Shut up!

Burn her! How do you know she is a witch? You don't frighten us, English pig-dogs! Go and boil yo...

Egan Poetz

3 days ago

``` ## Color variations Add a status color to your card, either at the top or on the side of the card, to customise it and make it more eye-catching. ```html example columns={2} centered height={400}

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.

``` ```html

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.

``` ## Stacked card Use the `card-stacked` class to stack up multiple cards, if you want to save screen space or create a visually appealing effect. ```html code example columns={1} centered height={300}

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.

``` ## Tabbed card Organize multiple cards into tabs to be able to display more content in a well-organized way and allow users to alternate between them easily. ```html example columns={2} centered height={400}

Content of tab #1