Footer and section layout

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 Footer and section layout—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 Footer and section layout 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 Footer and section layout in your own words.

Bulma ships layout primitives for full-page structure: section for vertical padding bands, hero for prominent headers, and footer for page-end content—each composable with container and columns.

Section and hero

section — standard vertical rhythm; pair with is-medium or is-large for more padding
hero → hero-body — full-width banner; add is-primary, is-fullheight for impact
hero-foot — optional bottom slot inside a hero (tabs, CTAs)

Footer pattern

The footer element uses footer class with optional inner columns for link groups. Keep contrast accessible—has-background-dark has-text-light is a common pairing.

Self-check

What is the difference between section and hero?
Where does container typically sit relative to section?

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

footer structure you prefer?
How keep footer at bottom?

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