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

About

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

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

- Home
- Inbox
- Add More

Tracey Chang
IT Director

- Tracey Chang Online
- Oliver Kopyuv Online
- Dr. John Cook PhD Away
- Ali Amdaney Online
- Sarah McBrook Online
- oliver.kopyuv@gotbootstrap.com Offline
- oliver.kopyuv@gotbootstrap.com Busy
- oliver.kopyuv@gotbootstrap.com Offline
- +714651347790 Missed Call

Jun 19

Hey Tracey, did you get my files?

3:00 pm

Hi

Sorry going through a busy time in office. Yes I analyzed the solution.

It will require some resource, which I could not manage.

3:24 pm

Okay

Sending you some dough today, you can allocate the resources to this project.

3:26 pm

Perfect. Thanks a lot!

I will have them ready by tonight.

Cheers

Jun 20
Send

#### Layout Settings User Interface Settings

##### App Layout

Fixed Header header is in a fixed at all times
Fixed Navigation left panel is fixed
Minify Navigation Skew nav to maximize space
Hide Navigation roll mouse on edge to reveal
Top Navigation Relocate left pane to top
Fixed Footer page footer is fixed
Boxed Layout Encapsulates to a container

Fixed Background

##### Mobile Menu

Push Content Content pushed on menu reveal
No Overlay Removes mesh on menu reveal
Off-Canvas (beta) Content overlaps menu

##### Accessibility

Bigger Content Font content fonts are bigger for readability
High Contrast Text (WCAG 2 AA) 4.5:1 text contrast ratio
Daltonism (beta) color vision deficiency
Preloader Inside preloader will be inside content
SmartPanel Icons (not Panels) smartpanel buttons will appear as icons

##### Global Modifications

Clean Page Background adds more whitespace
Hide Navigation Icons invisible navigation icons
Disable CSS Animation Disables CSS based animations
Hide Info Card Hides info card from left panel
Lean Subheader distinguished page header
Hierarchical Navigation Clear breakdown of nav links
Dark Navigation Navigation background is darkend

##### Global Font Size

SM MD LG XL
Change root font size to effect rem values (resets on page refresh)

##### Theme colors more info

##### Theme Modes (beta) why beta?

###### Internet Explorer Issue

This particular component may not work as expected in Internet Explorer. Please use with caution.
Default
Light
Dark

Reset Settings
Factory Reset