Cards

Bootstrap 5.3 .card patterns: structure, media, list groups, colored surfaces (.text-bg-*), borders, groups, tabs, pricing, and glass-style panels. Toggle the navbar theme — this page layers extra dark-mode contrast (shadows, outlines, tab labels, and media scrims) so every sample stays readable.

Composable layout

Prefer .card-header / .card-body / .card-footer over deep nesting. Pair with .row + .col-* instead of legacy .card-deck or .card-columns.

Card docs

Body only

Minimal card with default --bs-card-bg and border.

This is plain text inside .card-body. Add utilities (.p-4, .rounded-3) as needed.

Title, subtitle, links

.card-title, .card-subtitle, .card-link.

Card title

Card subtitle

Supporting copy builds on the title and can run multiple lines.

Card link Another link

Header · body · footer

Featured block with muted footer timestamp.

Featured

Special title treatment

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

Go somewhere
Updated 3 days ago

Quote + blockquote

.blockquote-footer with cite.

Quote

A well-designed card hierarchy keeps scans fast and actions obvious.

Someone famous in Source Title

Media on top

.card-img-top or ratio wrapper. Swap in your own images/ assets.

16×9

Image top

Caption and actions sit below the media.

Action

Media on bottom

.card-img-bottom after the body.

Image bottom

Copy reads first; media anchors the card visually.

Outline
4×3

Horizontal layout

.row.g-0 inside the card; stack on small viewports with .col-md-*.

Layout

Horizontal card

Useful for article teasers, product rows, or profile snippets.

List group flush

.list-group.list-group-flush as direct child of .card.

  • Cras justo odio 14
  • Dapibus ac facilisis in
  • Vestibulum at eros

Kitchen sink

Header, image area, body, list, and footer together.

Bundle
21×9 banner

All-in-one demo

Mix patterns carefully to avoid noisy UI.

  • Checklist item one
  • Checklist item two
Docs Support

Text alignment

Start

Default alignment.

Button

Center

.text-center on the card.

Button

End

RTL-friendly mirror.

Button

Header tabs

.nav-tabs.card-header-tabs with data-bs-toggle="tab".

First pane — swap content per tab without leaving the card.

Second pane — keep related controls in one surface.

Header pills

.nav-pills.card-header-pills.

Filters

Showing all items.

Showing open items only.

Subtle surfaces

.border-*-subtle + .bg-*-subtle + .text-*-emphasis — calm cards that respect both themes.

Primary subtle

Great for tips and low-priority callouts.

Success subtle

Positive states without loud fills.

Danger subtle

Errors that should not dominate the page.

.text-bg-* contextual

Bootstrap 5 utility on the card sets accessible text and background together.

Header

Primary

High-emphasis brand surface.

Header

Secondary

Neutral supporting panel.

Header

Success

Positive completion states.

Header

Danger

Destructive or blocking issues.

Header

Warning

Dark text for contrast on yellow.

Header

Info

Informational highlights.

Header

Light

Often needs an explicit border.

Header

Dark

Gets a faint outline in dark theme so it does not blend into the page background.

Border color

.border-primary etc. on default body cards.

Primary border
Success border
Danger border

Image overlay

Royalty-free photo from Unsplash (images.unsplash.com). Wrapper .card-overlay-photo uses a stronger multi-stop scrim in light and dark so white text stays readable on bright skies.

Snow-capped mountain peaks and alpine valley under a bright sky

Alpine route

The .card-overlay-photo scrim is tuned separately for light and dark UI so this caption stays legible on bright clouds.

Photo: Mountain landscape by Eberhard Grossgasteiger on Unsplash · free to use under the Unsplash License.

.card-group

Attached deck with shared borders; use .card-group wrapper only (no row).

A

One

Equal flex columns in the group.

Footer
B

Two

Middle card shares side borders.

Footer
C

Three

Stacks on narrow screens automatically.

Footer

Accent border — KPI strip

Class .card-accent-start draws a 4px primary rail; the rail brightens slightly under data-bs-theme="dark".

Revenue

$48.2k

12% vs last week

Active users

3,842

Live sessions

Incidents

0

All systems nominal

Pricing-style row

Middle column uses .border-primary .border-2 and stronger shadow; works in both themes.

Starter

$0

per seat / mo

  • 5 projects
  • Community support
Popular

Pro

$29

per seat / mo

  • Unlimited projects
  • SSO + audit log
  • Priority support

Enterprise

Custom

annual billing

  • Dedicated success
  • VPC / HIPAA

Glass surface

.card-glass uses backdrop-filter and semi-transparent body-bg; disabled when prefers-reduced-motion requests reduced blur.

Experimental

Frosted panel

Stack over photography or gradients; keep body text in .text-body / .text-body-secondary for theme contrast.

Badges + progress

Mix utilities inside .card-body — progress uses Bootstrap’s native bar colors in both modes.

Sprint 24

Ship scope tracker

At risk

Completion68%

Design API QA sign-off
Due Friday · 3 blockers open

Horizontal list row

Dense rows with icons — borders use border-opacity-* for soft separators in dark UI.

Automation 12 workflows running
Live
Backups Last run 04:00 UTC
OK

Muted “inset” card

.bg-body-tertiary (BS 5.3) for a recessed panel on top of the default body.

Release notes

Tertiary body backgrounds shift with data-bs-theme, so this block stays subtly distinct in dark mode.

Responsive grid (replaces card-deck)

.row.row-cols-* .col .card.h-100 for equal-height columns with gutters.

Column A

Independent cards with spacing via gutter.

Column B

Taller copy still stretches siblings with h-100.

Column C

Preferred modern layout.