Menu and media objects

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 Menu and media objects—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 Menu and media objects 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 Menu and media objects in your own words.

Menu lists vertical navigation—dashboard sidebars, settings screens, filters. Markup: menu → menu-label sections → menu-list with <ul><li><a>. Highlight the current page with is-active on the link.

Media object

media aligns an avatar or icon beside body copy—comments, activity feeds, team rosters. Structure: media → media-left (figure) + media-content. Nest smaller media blocks for threaded replies.

Composition

Pair a column is-one-quarter menu with a media feed in the main column—the classic admin shell without Bootstrap’s offcanvas JS.

Self-check

Which class marks the active menu link?
Where does the avatar figure live in a media object?

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

menu vs navbar—when each?
media object use case?

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