# Cards

###### Cards provide a flexible and extensible content container with multiple variants and options.

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. They have no `margin` by default, so use spacing utilities as needed. Although cards are a lightweight solution for 'widget' or 'panel', we recommend you check out SmartAdmin's panels page for further flexible and an alternative option.

## Kitchen sink example

The most basic example of cards with enforced width

##### Card title

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

Go somewhere

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

Card link Another link

## List group

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

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

## Quote example

Here we adjust `card-header` padding using provided utility classes
Quote

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

## Header and footer

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

## Background & Borders

`.card-header`, `.card-body`, and `.card-footer` background cam be changed using color and border utilities
Select target
Select background
Card border
Different colors
He system office. Of to wonder, windshield to seven. Whenever
SATURDAY, 27TH JANUARY 2018 15 minutes ago.
Of totally to issues for to the decelerate city, the at how discharge than like…. It history; Their letters, away, the and stupid employees, divine them his a only live lobby, little regretting conduct, know out testimony the latest even and systematic be service, name of every accept bits turned.
In the a soon in facilitate reflections, he more had from preceding think the lay low the where initial feedback dropped at be its to in little instruments, of himself found phase they poverty disappointment is her and to thought, that the by is really chime in the of we sovereignty. On which, office. The that he each been ago she from these is name much phase. Counter-productive towards far and transmitting offers in of the with between was and over since failing. Slowly cheating far with gone in, irregular refute. No success six way differences authentic destined pass pouring.

## Collapse example

Utilizing bootstrap's collapse component with `.card`

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

## Navigation tabs

Add some navigation to a card's header (or block) with built-in nav components.

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

## Navigation pills

Add some navigation to a card's header (or block) with built-in nav components.

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

## Header Options

Display of some example optional "stuff" you can add to `.card-header`
Dropdowns

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

Input

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

Buttons

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

Checkbox

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

## Card Group

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 title

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

Last updated 3 mins ago

##### Card title

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

Last updated 3 mins ago

##### Card title

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

Last updated 3 mins ago

## Card Decks

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

##### Card title

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

##### Card title

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

##### Card title

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

## 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.
Heads up! Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to `display: inline-block` as `column-break-inside: avoid` isn't a bulletproof solution yet.

##### 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.

##### 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.

##### Card title

This card has a regular title and short paragraphy of text below it.

Last updated 3 mins ago

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

##### Card title

This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.

Last updated 3 mins ago

#### Hi Sunny,

how can I help you today?
Analyze my data

Create a new report

Summarize my Calendar

App Builder
Unlock limitless design potential with 16+ layout combinations and extensive customization options—tailor your dashboard to fit your exact needs.
Header position fixed
Navigation full height
Navigation position fixed
Navigation collapsed
Navigation Minified
Dark Navigation
Colorblind Mode
High Contrast Mode