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.
While we displayed some examples of cards here, you can learn more details of its usage at the official bootstrap documentation.
Kitchen sink example
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
List group
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Quote example
card-header
padding using provided utility classes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Header and footer
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereBackground & Borders
.card-header
, .card-body
, and .card-footer
background cam be changed using color and border utilities
Collapse example
.card
With supporting text below as a natural lead-in to additional content.
Navigation tabs
With supporting text below as a natural lead-in to additional content.
Navigation pills
With supporting text below as a natural lead-in to additional content.
Header Options
.card-header
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
Card Group
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 agoCard title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins agoCard title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins agoCard 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
.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.
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