Skip to content
Learn Netverks

Lesson

Step 8/36 22% through track

column-sizes

Column sizes and nesting

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 Column sizes and nesting—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 Column sizes and nesting 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 Column sizes and nesting in your own words.

Size columns with fraction modifiers: is-half, is-one-third, is-two-thirds, or twelfths is-1 through is-12. Combine with responsive suffixes like is-half-tablet for mobile-first layouts.

Advanced column tools

  • is-narrow — column shrinks to content width
  • is-offset-3 — push a column right by empty tracks (twelfths)
  • Nested columns inside a column — sub-grids for complex dashboards
  • is-vcentered on columns — vertical alignment of column children

Important interview questions and answers

  1. Q: What does is-half-tablet mean?
    A: From the tablet breakpoint upward, the column takes 50% width; below tablet, it behaves as a full-width stacked column unless another modifier applies.
  2. Q: is-4 vs is-one-third?
    A: is-4 spans 4 of 12 tracks (one-third); is-one-third is the semantic fraction equivalent—pick whichever reads clearer in your team.

Self-check

  1. Write classes for a column that is full width on mobile and half width on tablet+.
  2. When is nesting columns inside a column valid?

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

  • Which is-half layout will you reuse?
  • Desktop-only width—how?

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36