Cards
A flexible and extensible content container with multiple variants and options. Read the Official Bootstrap Documentation for a full list of instructions and other options.
Basic Example
Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereContent Types
Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.
Title, Texts and Links
Card titles are used by adding .card-title to a heading tag. In the same way, links are added and placed next to each other by adding .card-link to an anchor tag.
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 linkHeader & Footer
Add an optional header and/or footer within a card.
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
Card Navigation
Add some navigation to a card’s header (or block) with Bootstrap’s nav components.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Image Overlay
Turn an image into a card background and overlay your card’s text.
Background Color
Use text and background utilities to change the appearance of a card.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Card Groups
Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use flex display to achieve their uniform sizing.
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
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. 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
Card Columns
Cards can be organized into Masonry-like columns with just CSS by wrapping them in .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 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