Skip to docs navigation

Cards

Example

" Image cap
Card title

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

Go somewhere

Primary

Lorem ipsum dolor sit amet, erant dolor phaedrum.

Secondary

Lorem ipsum dolor sit amet, erant dolor phaedrum.

Content types

Body

This is some text within a card body.

Titles, text, and links

Card title
Card subtitle

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

Card link Another link

Images

" Image cap

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

List groups

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
Featured
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
Card footer

Kitchen sink

" Image cap
Card title

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 link Another link
Featured
Special title treatment

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

Go somewhere

Card headers can be styled by adding .card-header to <h*> elements.

Featured
Special title treatment

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

Go somewhere
Quote

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

Someone famous in Source Title
Featured
Special title treatment

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

Go somewhere
2 days ago

Sizing

Using grid markup

Special title treatment

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

Go somewhere
Special title treatment

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

Go somewhere

Using utilities

Card title

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

Button
Card title

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

Button

Using custom CSS

Special title treatment

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

Go somewhere

Text alignment

Special title treatment

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

Go somewhere
Special title treatment

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

Go somewhere
Special title treatment

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

Go somewhere
Special title treatment

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

Go somewhere
Special title treatment

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

Go somewhere

Images

Image caps

" Image cap
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 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

" Image cap

Image overlays

" Card image
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

Note that content should not be larger than the height of the image. If content is larger than the image the content will be displayed outside the image.

Horizontal

" Image
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 styles

Background and color

Header
Primary card title

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

Header
Secondary card title

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

Header
Success card title

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

Header
Danger card title

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

Header
Warning card title

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

Header
Info card title

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

Header
Light card title

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

Header
Dark card title

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

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Border

Header
Primary card title

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

Header
Secondary card title

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

Header
Success card title

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

Header
Danger card title

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

Header
Warning card title

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

Header
Info card title

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

Header
Light card title

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

Header
Dark card title

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

Mixins utilities

Header
Success card title

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

Footer

Card layout

Card groups

" Image
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

" Image
Card title

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

Last updated 3 mins ago

" Image
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

When using card groups with footers, their content will automatically line up.

" Image
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
" Image
Card title

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

Last updated 3 mins ago
" Image
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

Grid cards

" Image cap
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.

" Image cap
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.

" Image cap
Card title

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

" Image cap
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.

Change it to .row-cols-3 and you’ll see the fourth card wrap.

When you need equal height, add .h-100 to the cards. If you want equal heights by default, you can set $card-height: 100% in Sass.

" Image cap
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.

" Image cap
Card title

This is a short card.

" Image cap
Card title

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

" Image cap
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.

Just like with card groups, card footers will automatically line up.

" Image
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
" Image
Card title

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

Last updated 3 mins ago
" Image
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

Masonry

In v4 we used a CSS-only technique to mimic the behavior of Masonry-like columns, but this technique came with lots of unpleasant side effects. If you want to have this type of layout in v5, you can just make use of Masonry plugin. Masonry is not included in Bootstrap, but we’ve made a demo example to help you get started.