Skip to content
Learn Netverks

Lesson

Step 16/36 44% through track

images-figures

Images and figures

Last reviewed Jun 1, 2026 Content v20260601
Track mode
iframe_html
Means
HTML preview sandbox
Reading
~1 min
Level
beginner

This lesson

This lesson teaches Images and figures—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 Images and figures 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 Images and figures in your own words.

Bulma’s image class constrains responsive images with optional size modifiers. Combine with figure for captioned media—building on HTML images and CSS sizing without reinventing aspect-ratio rules.

Image sizes

  • image is-16by9, is-4by3, is-square — fixed aspect ratios via padding hack
  • image is-128x128 — square dimensions for avatars and thumbnails
  • image is-rounded — circular crop for profile photos

Figure pattern

Wrap with figure class="image" and add figure-caption (via figcaption styled in content) for accessible captions. Always set meaningful alt text on img elements.

Self-check

  1. How do you render a circular 96px avatar?
  2. Why use figure.image instead of a raw img tag?

Interview tip Lesson completion confidence

Can you explain this lesson in 30 seconds without reading notes?

Not saved yet.

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Check yourself

Multiple choice — immediate feedback.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

  • image is-16by9—why?
  • Figure caption accessibility?

Sign up or log in to post comments and sync lesson progress across devices.

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

Jump