Cards

Cards

Last reviewed Jun 1, 2026 Content v20260601

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 Bulma.

Bulma offers a lighter component model when Bootstrap feels too heavy or dated.

You will apply Cards in contexts like: Smaller marketing sites, internal dashboards, and projects that need quick responsive layout with minimal JS.

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: optional card-image, card-header, card-content, and card-footer. Use title and subtitle inside the body for inner typography.

Layout tips

Equal-height rows: place cards inside columns and let flex stretch siblings.
Horizontal cards: nest columns is-mobile inside card-content with image + copy columns.
Subtle emphasis: pair with box or shadow helpers when you need depth without custom CSS.

Cards mirror the “panel” pattern in other frameworks—similar intent to Bootstrap cards, with Bulma’s modifier vocabulary.

Important interview questions and answers

Q: card vs box?
A: box is a simple padded container; card adds structured regions (header, image, footer) for richer media layouts.
Q: How do card grids stay equal height?
A: Parent columns is a flex row; each column stretches, so cards inside share the tallest sibling height.

Self-check

Name two optional sections besides card-content.
Which layout primitive should wrap a row of cards?

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

card header vs content?
Card as clickable region—a11y?

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