Bulma columns: force mobile stacking with is-mobile

Columns stay side-by-side on phones unless you opt in

In Bulma, a columns wrapper with column children creates a flexbox row. By default, width classes such as is-half or is-one-quarter keep those columns side-by-side even on narrow phone viewports. They do not automatically wrap or stack.

Useful takeaway: add is-mobile to a column when you want its responsive width to apply on mobile viewports instead of waiting for the tablet breakpoint. Without it, the column keeps its desktop width until Bulma’s tablet media query activates.

How Bulma’s column grid works

Bulma’s grid is flexbox-based, not CSS Grid. The columns element establishes the formatting context, and direct children marked column become flex items. Width is controlled by fixed percentage classes:

• is-half — 50%
• is-one-third — 33.3333%
• is-one-quarter — 25%
• is-full — 100%

Breakpoint modifiers scope a width class to a minimum viewport width. The named breakpoints are mobile (default), tablet, desktop, widescreen, and fullhd. A class written as is-one-quarter is-one-desktop means “one quarter on desktop and wider; use the default behavior below desktop.”

Adding is-mobile changes that default: the modifier becomes active at the mobile breakpoint, so the column can stack or resize below tablet width.

Worked example: four equal columns that stack on mobile

This markup creates four equal columns. On phones they stack vertically; above the tablet breakpoint they sit side-by-side.

<div class="columns">
  <div class="column is-one-quarter is-mobile">
    <p>Column one</p>
  </div>
  <div class="column is-one-quarter is-mobile">
    <p>Column two</p>
  </div>
  <div class="column is-one-quarter is-mobile">
    <p>Column three</p>
  </div>
  <div class="column is-one-quarter is-mobile">
    <p>Column four</p>
  </div>
</div>

What the markup does

• columns creates a horizontal flex row by default.
• is-one-quarter sets each child to 25% width.
• is-mobile tells Bulma to apply that width rule at the mobile breakpoint, so the browser can stack the items when the viewport is too narrow for four 25% columns.

If you remove is-mobile, the four columns remain side-by-side on a phone and overflow the screen horizontally instead of wrapping.

Limits and common mistakes

More than twelve units overflows

Bulma column widths are fixed percentages. A row containing five is-one-quarter columns totals 125 percent, which forces horizontal overflow. Bulma does not auto-correct or rebalance the row. Keep the combined width of columns in a single row at or below 100 percent.

Nesting works, but count units inside each parent

You can place a new columns element inside a column to build multi-level layouts. The nested row is independent, so its children must also add up to 100 percent or less within that nested container.

Changing breakpoints or gutters requires Sass

Bulma’s breakpoint names and gap sizes come from Sass variables compiled into the distributed CSS. Editing the compiled stylesheet directly will not reliably change grid behavior because media queries and width rules are generated from those variables. Override the variables in your Sass build pipeline before compiling Bulma.

Do not mix grid frameworks in the same container

Combining Bulma columns with another CSS grid or flexbox framework inside one element creates competing formatting contexts. Use one layout system per container.

Verify the behavior before shipping

Check the installed Bulma version

Behavior described here applies to stable Bulma 0.9.x and 1.x releases. Run this in your project root to confirm the dependency:

node -e "console.log(require('./package.json').dependencies.bulma)"

Where: terminal in the project root. Permissions: read access to package.json. Expected check: a version string such as 0.9.4 or 1.0.0. Risk: if Bulma is loaded by CDN instead of npm, this command returns undefined; inspect the stylesheet link or header comment instead.

Inspect compiled CSS for grid rules

Run this against the compiled Bulma stylesheet to confirm the column and media-query rules exist:

grep -n "\.column" <path-to-bulma-css>

Where: terminal. Permissions: read access to the CSS file. Placeholder: <path-to-bulma-css> such as node_modules/bulma/css/bulma.css. Expected check: output includes .column rules and media queries matching @media screen and (min-width: 768px) for tablet. Risk: minified CSS places many rules on one line, so use grep -o or open the file in an editor if the match is hard to read.

Browser resize check

1. Open the page containing your columns markup.
2. Narrow the viewport to phone width.
3. Confirm columns with is-mobile stack vertically; columns without it remain side-by-side or overflow.
4. Widen past the tablet breakpoint and confirm side-by-side layout returns.

If the stacked layout does not appear, verify that is-mobile is on the column elements themselves, not only on the columns wrapper, and that no custom CSS overrides Bulma’s flexbox rules.