Panels and tabs

Last reviewed May 28, 2026 Content v20260528

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

intermediate

This lesson

This lesson teaches Panels and tabs—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 Panels and tabs 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.

Panels suit settings pages and admin lists: panel with panel-heading, optional panel-tabs, and panel-block rows. Tabs switch visible sections—markup is a ul.tabs with li.is-active; Bulma styles the active state, but showing/hiding panes is your JS or routing layer.

When to use which

Panel — stacked list of actions or filters (billing settings, team roster)
Tabs — horizontal section switcher above related content
Menu — persistent vertical nav; tabs — horizontal context within one page

Self-check

Which class marks the active tab?
What element repeats for each row inside a panel?

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

panel heading structure?
Tabs need JS—your plan?

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