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/
|