Hero sections

Last reviewed Jun 1, 2026 Content v20260601

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

intermediate

This lesson

This lesson teaches Hero sections—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 Hero sections 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.

The hero component is Bulma’s full-width banner: hero with color modifiers (is-primary, is-link, is-dark) and a centered hero-body for headline, subcopy, and calls to action.

Variants

is-fullheight or is-halfheight — viewport-sized marketing bands
hero-head / hero-foot — optional regions for nav or meta links
Background images: add is-primary overlays or custom CSS on hero while keeping text contrast readable

Heroes replace old “jumbotron” patterns from other frameworks—similar role to large Bootstrap hero sections, without JavaScript.

Self-check

Which element wraps the main headline and buttons?
When would you choose is-halfheight over full height?

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

hero body size pick?
Hero image overlay?

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