Elements:Cards
Examples
Card are super flexible content containers which can have a header/title, image, content, footers, lists, links and more.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard with image in middle
And a subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard with list-group
Some quick example text to build on the card title and make up the bulk of the card's content.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Card content
Cards support a huge array of content and define their own helper classes for content.
.card-body
This class allows you to add padding to either the whole card or blocks of content within a card. This is really useful if some content needs to stretch to the edges (like images) and some not (like text).
.card-header
+
.card-footer
These classes apply padding, a background colour and border radias properties to the card header or footer, useful for capping the top & bottom of a card.
.card-header
can also be applied directly to an
h
badge element to apply a similar effect.
.card-title
This simply applies a bottom margin to an item which should be considered the title of the card.
.card-text
This applies no effect on default cards and is only used when using the
.card-inverse
class (below).
.card-header-tabs
+
.card-header-pills
These classes should be applied to navigation elements should in the card header.
List groups
.list-group-flush
This class allows you to include list groups within cards and have them stretch to the edge of the card.
Card images
Images can be added to cards either at the top, middle, bottom or even as a background image.
Card image top
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard image bottom
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
Card image middle
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
Card Content Alignment
Cards support the standard text alignment utilities:
.text-BREAKPOINT-ALIGN
Default alignment
With supporting text below as a natural lead-in to additional content.
Go somewhereCenter alignment
With supporting text below as a natural lead-in to additional content.
Go somewhereCard Ribbons
You can apply a ribbon to the corners on cards which can be useful to highlight a specific card.
HTML: View code example
<div class="card-ribbon card-ribbon-VERTICAL-ALIGN card-ribbon-HORIZONTAL-ALIGN ANY-HELPER-CLASSES">SHORT TEXT</div>.card-ribbon-VERTICAL-ALIGN
can be top or bottom,
card-ribbon-HORIZONTAL-ALIGN
can be left or right.
You can use the colour utilities to control the background colour & text colour of the ribbons. NOTE: Ribbons do not work with "Cards Columns" below.
Ribbon
With supporting text below as a natural lead-in to additional content.
Go somewhereRibbon
With supporting text below as a natural lead-in to additional content.
Go somewhereCard Styles
Background colours
Apply solid background colours to cards, use in conjunction with the
card-inverse
or the text colour utilities.
.card-primary
Causa decet eros macto nisl obruo populus quadrum virtus.
.card-secondary
At iaceo nostrud patria quae volutpat.
.card-info
Cui gilvus ibidem pala patria. Esse exputo minim occuro paratus venio.
.card-success
Caecus commodo conventio letalis virtus. Amet causa hos ideo in interdico letalis metuo praesent vulpes.
.card-warning
Enim iustum magna neque nostrud premo sit tation.
.card-danger
Abdo cui esca iaceo pala probo quae rusticus zelus.
.card-dark
Comis haero olim pneum refero vicis volutpat.
.card-light
Laoreet nisl turpis. Antehabeo augue consectetuer consequat ideo nibh nobis proprius.
Outline colours
Apply an outline colours to cards with these classes.
.card-outline-primary
Dolus hos illum jumentum pertineo. Causa defui enim iustum lucidus modo nostrud vero virtus.
.card-outline-secondary
Aliquam ibidem macto pagus tego ullamcorper utrum veniam virtus.
.card-outline-info
Eligo eu hendrerit inhibeo metuo nutus olim ratis similis.
.card-outline-success
Capto decet immitto importunus persto proprius te venio.
.card-outline-warning
Aptent dolore eum huic importunus letalis molior nibh sudo vulpes.
.card-outline-danger
Conventio eligo patria tincidunt vulputate. Abbas blandit esse jus minim nisl pecus quibus tamen.
.card-outline-dark
Causa molior os proprius suscipit. Commodo consectetuer facilisis macto premo quibus.
.card-outline-light
Caecus ideo pagus. Luctus tation validus.
Background Shadow
The
bg-shadow
class can be used on cards to give a background shadow effect.
Background Shadow
With supporting text below as a natural lead-in to additional content.
Go somewhereClickable Cards
To make a whole element or card clickable to a url, simply add
data-url="URL"
and it will make the whole element or card act link a link.
Cards Grids
Cards can be laid out using the grid system built into Bootstrap.
Cards Groups
Groups will force all cards to be displayed on the same row as well as be the same width and height.
Simply wrap your card elements within a
.card-group
wrapper like this:
<div class="card-group">...cards.....</div>
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
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 is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Last updated 3 mins ago
With aligned footers
If cards contain
.card-footer
elements they will automatically get pulled to the bottom and aligned with the other card footers.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
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. This card has even longer content than the first to show that equal height action.
Cards Decks
Card decks work much like groups expect the cards are not attached to each other.
Card decks require 2 wrapper elements like this:
<div class="card-deck-wrapper"><div class="card-deck">...cards.....</div></div>
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
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 is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Last updated 3 mins ago
With aligned footers
Like card groups if cards contain
.card-footer
elements they will automatically get pulled to the bottom and aligned with the other card footers.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
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. This card has even longer content than the first to show that equal height action.
Cards Columns
Cards can be set to display in Masonry-like columns just by adding a wrapper with the class
.card-columns
.
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 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 a ante.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Last updated 3 mins ago