Bulma's Column System: The Grid You Can Read at a Glance

You need a row of cards: stacked on phones, two across on tablets, four across on desktops. In raw CSS that's a media query, some flex-basis math, and at least one moment where you wonder why the third card wraps early. In Bulma it's about six class names and zero custom CSS. That's the whole pitch of Bulma's column system — and it's worth understanding precisely what it does and where it stops being the right tool.

Flexbox with sensible defaults

Bulma's grid is a thin, well-chosen layer over Flexbox. A .columns container wraps any number of .column children, and by default those children share the available width equally. Two columns? Each gets half. Four columns? A quarter each. There is no width math to write because there is no width at all until you ask for one.

When you do want control, sizing classes come in two dialects: named fractions like is-half and is-one-third, and twelve-based classes like is-4 (four of twelve). Mixing them with unsized columns is where the system gets pleasant: give a sidebar is-one-quarter and leave the main content as a plain .column, and the main area simply absorbs whatever is left. You express intent — "sidebar, fixed ratio; content, whatever remains" — rather than arithmetic.

Mobile-first by construction

The responsive modifiers are the part that sells the system. A class like is-half-tablet means "half width, but only from the tablet breakpoint upward." Below that breakpoint the column behaves as a full-width block, so the default state of every layout is stacked and readable on a phone. You layer complexity on top of a working mobile layout instead of carving exceptions out of a desktop one.

One caution before you copy breakpoints from an old tutorial: exact pixel thresholds and some theming details differ between Bulma 0.9.x and the 1.x line, which reworked the framework around CSS custom properties. The column class names are stable across both, but check the documentation for the version you actually installed (npm list bulma, or read the version off your CDN URL) before quoting breakpoint values in a design spec.

Worked example: the card row

Here is the card row from the opening paragraph, complete:

<div class="columns is-multiline is-mobile">
  <div class="column is-half-tablet is-one-quarter-desktop">
    <div class="card">...</div>
  </div>
  <!-- repeat three more times -->
</div>

Read it left to right. is-multiline lets columns wrap instead of squeezing onto one line. Each column is full width on small phones, is-half-tablet makes it two-up from the tablet breakpoint, and is-one-quarter-desktop makes it four-up on desktop. No stylesheet of your own is involved; the only file you ship is Bulma itself. Because Bulma is class-only and ships no JavaScript, this drops into a React component, a Rails partial, or a static page unchanged.

To verify the behavior rather than trust it: load the page, open devtools, and drag the viewport across your version's tablet and desktop breakpoints. You should see the cards reflow at each threshold. Toggling is-gapless on the container in the inspector is a quick sanity check too — the default column gap should visibly collapse, confirming you're looking at Bulma's flex layout and not some other rule winning the cascade.

Where the grid stops helping

The honest limitation: this is a one-dimensional, twelve-part system. It handles rows of things beautifully and anything genuinely two-dimensional not at all. If your layout needs an item to span rows and columns simultaneously, overlapping placement, or masonry-style packing where items of different heights fill gaps, you are describing CSS Grid's territory, and fighting Bulma's columns into that shape produces worse CSS than just writing Grid.

There's also a subtlety with mixing sized and unsized columns: the unsized ones divide remaining space, which is usually what you want, but if you stack several fraction classes on siblings that sum past twelve, is-multiline will wrap them in ways that surprise people who skimmed the markup. When a row misbehaves, the first diagnostic is to add up the fractions.

The takeaway

Reach for Bulma's columns when your layout is "a row of things that reflows by breakpoint" — which, in practice, is most marketing pages, dashboards, and admin panels. Write the mobile stack first, add -tablet and -desktop modifiers where the design calls for it, and keep the fraction math in your head to twelve. The moment you catch yourself needing row spans or masonry, switch that component to CSS Grid and let each tool do the one thing it's good at.