Sections and boxes

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 Sections and boxes—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 Sections and boxes 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.

Toward the end of the track—use it to consolidate patterns before the capstone or summary lessons.

section adds vertical rhythm between page regions; nest a container (fixed max-width) or container is-fluid (edge-to-edge with padding) inside. Use box for simple padded panels—metrics, settings cards, empty states.

Composition

Alternate section bands with neutral backgrounds via has-background-light on the section or an inner box.
Combine columns inside a section for feature grids.
Title hierarchy: title + subtitle at the section top, then content blocks.

Self-check

What is the difference between container and container is-fluid?
When is a box enough without a full card?

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

section vs container?
box vs card?

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