Colors and helpers

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 Colors and helpers—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 Colors and helpers 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 Colors and helpers in your own words.

Bulma exposes a fixed palette through modifier helpers: has-text-primary, has-background-info, and semantic colors on components via is-success, is-warning, is-danger.

Text and background helpers

has-text-* — primary, link, info, success, warning, danger, grey, white, black
has-background-* — same palette for surfaces; pair with contrasting text
is-light on components — softer background variant (e.g. notification is-info is-light)

Component color modifiers

Buttons, tags, messages, and navbar items accept is-primary, is-link, etc. One modifier switches the entire component theme—compare Bootstrap’s btn-primary pattern, but applied across Bulma’s element set.

Self-check

How do you make a box use an info-colored background with readable text?
What does is-light change on a notification?

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

has-text-danger vs is-danger?
Contrast checked?

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