Cards

Cards

Last reviewed May 28, 2026 Content v20260528

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

beginner

This lesson

This lesson teaches Cards—the ideas, syntax, and habits you need before moving on in Bootstrap.

Bootstrap patterns appear constantly in legacy apps and rapid admin UI work.

You will apply Cards in contexts like: Internal tools, WordPress themes, Laravel apps, and teams that want opinionated UI without writing every rule from scratch.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

When the previous lesson's MCQs feel easy and you can explain Cards in your own words.

Cards group related content in a bordered surface: card → card-body, optional card-header, card-footer, and card-img-top. Use card-title and card-text for inner typography.

Layout tips

Equal heights in grids: add h-100 on the card inside a row
Horizontal cards: row g-0 inside the card with image + body columns
Subtle depth: shadow-sm utility alongside default border

Cards are Bootstrap’s answer to repeated “panel” UI—similar to composing Tailwind utilities into a reusable card component, but the structure is prescribed.

Important interview questions and answers

Q: card vs well/jumbotron (legacy)?
A: Bootstrap 5 standardized on cards; jumbotron was removed—use utilities + cards for hero blocks.
Q: How do card grids stay equal height?
A: Parent row with columns; h-100 on each card so flex/grid stretches them.

Self-check

Name the three optional sections besides card-body.
Which utility prevents short cards in a row from looking uneven?

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

What belongs in card-header vs body?
How would you make cards keyboard-friendly?

No discussion yet. Be the first to ask a question.