Build Responsive Bulma Column Grids Without Custom CSS

A fixed column width does not respond to the screen

You build a product grid with Bulma and give every card `class="column is-one-quarter"`. On a desktop browser the row looks balanced. On a phone, those same four columns compress into narrow, unreadable strips because `is-one-quarter` always means 25 percent of the container, regardless of viewport size. Bulma's `columns` component is a flexbox container, and its `column` children are flex items, but a width modifier alone does not describe how the layout should change between a handheld device and a wide monitor.

The practical takeaway is to build the layout for the smallest screen first, then add breakpoint-specific containers that show or hide different column structures. Verify the result by inspecting computed widths in browser devtools, not by resizing the window and hoping.

How Bulma's column grid behaves

A `columns` element creates a flexbox row. Direct children marked with `column` become flexible items, and Bulma applies automatic gutters—the padding that separates adjacent columns. Width modifiers such as `is-one-quarter`, `is-half`, `is-three-quarters`, and `is-full` express fractions of a 12-part row. Four `is-one-quarter` columns fill the row; two `is-half` columns do the same. The modifier `is-flex` opts a column into explicit flexbox alignment and growth behavior instead of the default percentage width.

Because Bulma is mobile-first, a column without any breakpoint modifier keeps its width at the smallest breakpoint. Breakpoint modifiers are cumulative: if you only declare behavior for desktop, smaller screens fall back to the base style. That default can cause layout shifts if you never define what happens on tablet or mobile.

Worked example: a three-tier product grid

This example shows one way to present products as a single column on phones, two columns on tablets, and four columns on desktops, using only Bulma classes. Bulma's fixed width modifiers do not change at breakpoints, so the pattern uses separate `columns` containers and Bulma's visibility helpers to display the appropriate one.

<!-- Mobile: one full-width column per row -->
<div class="columns is-hidden-tablet is-hidden-desktop is-hidden-widescreen">
  <div class="column is-full">
    <div class="card">Product A</div>
  </div>
  <div class="column is-full">
    <div class="card">Product B</div>
  </div>
</div>

<!-- Tablet: two columns per row -->
<div class="columns is-hidden-mobile is-hidden-desktop is-hidden-widescreen">
  <div class="column is-half">
    <div class="card">Product A</div>
  </div>
  <div class="column is-half">
    <div class="card">Product B</div>
  </div>
</div>

<!-- Desktop and wider: four columns per row -->
<div class="columns is-hidden-mobile is-hidden-tablet is-hidden-touch">
  <div class="column is-one-quarter">
    <div class="card">Product A</div>
  </div>
  <div class="column is-one-quarter">
    <div class="card">Product B</div>
  </div>
  <div class="column is-one-quarter">
    <div class="card">Product C</div>
  </div>
  <div class="column is-one-quarter">
    <div class="card">Product D</div>
  </div>
</div>

Include Bulma in your project before testing. From a terminal in your project directory, run:

npm install bulma

Where to run: your project root. Permissions: none beyond normal file access. Placeholder: none; this installs the latest Bulma release into `node_modules`. Expected check: `node_modules/bulma/css/bulma.min.css` exists. Risk: a major Bulma version can rename or remove visibility helpers, so confirm the class names against the documentation for your installed version.

Add the stylesheet to your page, save the markup as `index.html`, and open it in a browser.

Verify with devtools

1. Open the page and open browser developer tools (usually F12 or right-click > Inspect).
2. Select a visible `.column` element in the Elements panel.
3. Open the Computed styles pane and inspect the `width` property.
4. On a narrow viewport, the visible mobile column should compute to approximately 100 percent minus gutter padding. On a tablet viewport, the visible half column should compute to approximately 50 percent. On a desktop viewport, the visible quarter column should compute to approximately 25 percent.
5. Resize the viewport or use the device toolbar. The correct container should appear or disappear without horizontal overflow.

If the width does not match the modifier, check for custom CSS overriding Bulma, confirm the element is a direct child of `.columns`, and verify you are inspecting the visible container rather than a hidden duplicate.

Nesting, accessibility, and limitations

Bulma allows arbitrary nesting: place a new `columns` element inside a `column` to build multi-level grids without custom CSS. The trade-off is deeper HTML and source-order concerns. Screen readers generally follow DOM order, so reordering columns visually with CSS while leaving the markup in a different sequence can create a confusing navigation flow. Keep the source order logical, and avoid nesting purely to move content around the page.

Other limitations:

• Width modifiers are fixed fractions. Bulma does not provide responsive width classes such as `is-half-tablet` out of the box; the duplicate-container pattern above is the standard workaround.
• Column widths in a single row should sum to 12. Exceeding that can cause wrapping or overflow depending on the container.
• Gutters are applied automatically. To change them globally you need the Sass build and the `$gutter` variable; with the CSS-only distribution, adjust spacing with utility classes or custom CSS.

Practical check: after resizing, use the Accessibility panel in devtools to confirm the visible grid announces a sensible heading and landmark structure, and that hidden containers are not exposed to the accessibility tree.

Closing decision

Start with the mobile stack, write the markup once per breakpoint, and verify computed widths in devtools before shipping. If your design requires arbitrary widths that shift at every breakpoint, consider Bulma's Sass source or a small custom CSS layer instead of forcing the fixed grid to do something it was not built for.