Card
Sink Card
Special title treatment
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
- Some quick example text to build on the card title
- Some quick example text to build on the card title
Special title treatment
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
- Some quick example text to build on the card title
- Some quick example text to build on the card title
Special title treatment
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
- Some quick example text to build on the card title
- Some quick example text to build on the card title
Navigation
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 somewhereOverlays
Background
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Danger card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Warning card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Flush
Special title treatment
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.
Special title treatment
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.
Special title treatment
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.
Hover
Special title treatment
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.
Special title treatment
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.
Special title treatment
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.
Stretch
Height 100%
Height 50%
Height 50%
Height 33.333%
Height 33.333%
Height 33.333%
Actions
Options
| Reference | Details |
|---|---|
Card
|
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards. |
Titles, text, and links
|
Card titles are used by adding
.card-title to a
<h*> tag. In the same way, links
are added and placed next to each other by adding
.card-link to an
<a> tag.
|
Images
|
.card-img-top places an image to the top
of the card. With .card-text, text can be
added to the card. Text within
.card-text can also be styled with the
standard HTML tags.
|
Kitchen Sink
|
Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card. |
Sizing
|
Cards assume no specific width to start,
so they'll be 100% wide unless otherwise stated. You
can change this as needed with custom CSS, grid
classes, grid Sass mixins, or utilities.
|
Text Alignment
|
You can quickly change the text alignment of any card—in its entirety or specific parts—with our text align classes. |
Navigation
|
Add some navigation to a card's header (or block) with Bootstrap's nav components. |
Overlays
|
Turn an image into a card background and overlay your card's text. Depending on the image, you may or may not need additional styles or utilities. |
Horizontal
|
Using a combination of grid and utility classes, cards
can be made horizontal in a mobile-friendly and
responsive way. In the example below, we remove the
grid gutters with .g-0 and use
.col-md-* classes to make the card
horizontal at the md breakpoint. Further
adjustments may be needed depending on your card
content.
|
Background and color
|
Set a background-color with contrasting
foreground color with
our .text-bg-{color} helpers.
Previously it was required to manually pair your
choice of
.text-{color}
and
.bg-{color}
utilities for styling, which you still may use if you
prefer.
|
Card Groups
|
Use card groups to render cards as a single, attached
element with equal width and height columns. Card
groups start off stacked and use
display: flex; to become attached with
uniform dimensions starting at the
sm breakpoint.
|
Grid Cards
|
Use the Bootstrap grid system and its
.row-cols classes
to control how many grid columns (wrapped around your
cards) you show per row. For example, here’s
.row-cols-1 laying out the cards on one
column, and .row-cols-md-2 splitting four
cards to equal width across multiple rows, from the
medium breakpoint up.
|
Flush Cards
|
Use .card-flush for flush cards. |
Hover Cards
|
Use .card-hover for hover cards. |
Stretch
|
Use .card-stretch for stretch cards.
Stretch sizing .card-stretch-{size} as:
100, 75, 50, 33.33, 25
|
Actions
|
Use .card-action for action cards. Also
add class on card body as
.card-body-action
|
Documentations
|
Please visit: https://getbootstrap.com/docs/5.3/components/card/ |