Using Bulma’s 12‑Column Grid with Breakpoint Modifiers for Responsive Layouts

Use Bulma’s grid to build a responsive layout

Start with a columns wrapper and size each child with breakpoint‑aware classes.

Worked example

<div class="columns">
  <div class="column is-4 is-6-mobile">Main content</div>
  <div class="column is-8 is-6-mobile">Sidebar</div>
</div>

The outer columns element creates a flex row that can hold up to twelve equal‑width columns. Each inner column receives a size class: is-4 means four of the twelve units on medium screens and up, while is-6-mobile forces the column to take six units (half the row) on phones.

How the mechanism works

Bulma’s CSS defines a 12‑unit grid. The is‑* modifiers map to a percentage width (e.g., is-4 → 33.33%). Breakpoint suffixes such as -mobile, -tablet, -desktop attach the rule to a media query, so the same element can have different widths at different viewport sizes.

Limits and common mistakes

• The total of all column numbers in a single row must not exceed 12; otherwise the row overflows and columns wrap unexpectedly.
• You must always place columns inside a columns container; omitting it removes the flex context and the size classes have no effect.
• Nested rows inherit the same 12‑unit limit; if you nest a columns inside a column, you must again keep the inner total ≤ 12.
• On very small screens Bulma stacks columns automatically only when you add the is-stackable class to the wrapper; forgetting it can leave columns squeezed side‑by‑side.

Practical verification

1. Open the page in a browser and right‑click → Inspect. Verify that each div.column carries the expected classes (e.g., is-4 is-6-mobile).
2. Resize the viewport: at widths ≥ 768 px (the tablet breakpoint) the first column should occupy roughly one‑third of the row and the second two‑thirds; below that width both should occupy half the row.
3. If the layout looks broken, check the sum of the numbers in the size classes for the current breakpoint and ensure the wrapper has the columns class.