Card
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
Shade Card, Flat Card
card flat f-
card shade outlined o-*
card shade full-outlined o-*
Card title
used class:
card flat
f-main
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Card title
used class:
card shade outlined o-main
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Card title
used class:
card flat
f-primary
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Card title
used class:
card shade
outlined o-primary
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Card title
used class:
card flat
full-outlined f-first
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Card title
used class:
card shade
full-outlined o-warning
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Card title
used class:
card flat
f-third
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Card title
used class:
card shade
full-outlined o-light
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Other examples
card flat f-
card shade outlined o-*
card shade full-outlined o-*
Featured
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereFeatured
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereFeatured
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere