Cards provide a flexible and extensible content container with multiple variants and options.
This is a simple card with some text content. Cards are built with as little markup and styles as possible.
ActionAdd an optional header within a card. Headers can be styled by adding .card-header to elements.
Add an optional footer within a card. Footers can be styled by adding .card-footer to elements.
Image Cap
Cards include various options for working with images. Choose from appending "image caps" at either end of a card.
Go somewherePlace an image at the bottom of the card. Images in cards have no fixed width or height by default.
Image Bottom
Use text and background utilities to change the appearance of a card.
Cards include their own variant classes for quickly changing the background-color.
Conveying meaning to assistive technologies using color.
Use .text-bg-{color} helpers to improve color contrast.
Use border utilities to change just the border-color of a card.
Note that .text-{color} utilities are also available.
Mix and match with various content and components.
Create visually appealing cards with border colors.
3 items
We're excited to announce the release of version 2.0 with many new features and improvements.
Card 1
This is a wider card with supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card 2
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card 3
This is a wider card with supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Horizontal
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
Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way.
Learn MoreImage Right