Responsive Layouts Without Media Queries: Mastering Bulma's Column System

The Media Query Fatigue

Building a responsive layout usually involves a repetitive cycle: write the HTML, style the desktop view, and then write a series of @media rules to fix the layout for tablets and phones. This approach often leads to CSS bloat, where a significant portion of the stylesheet is dedicated solely to adjusting widths and margins for different screen sizes.

The takeaway is simple: you can eliminate most manual media queries by leveraging a flexbox-based grid system that encodes responsiveness directly into the HTML classes. Bulma provides this through a column system that handles the math and the breakpoints for you.

How the Column System Works

Bulma is a pure CSS framework, meaning it contains no JavaScript. Its layout engine relies on Flexbox, which allows elements to grow and shrink dynamically. The core structure consists of a .columns container and .column children.

By default, .column elements are equal-width. If you place three .column divs inside a .columns container, each will automatically occupy one third of the width. This automatic sizing is the most efficient way to handle simple grids.

Explicit Widths and Breakpoints

When equal widths aren't enough, Bulma uses modifiers to set specific proportions. These modifiers follow a pattern: is-{size}-{breakpoint}. Common sizes include is-half, is-one-third, and is-one-quarter, or a numeric scale from is-1 to is-12.

The power comes from the breakpoint suffixes: -tablet, -desktop, -widescreen, and -fullhd. If you apply is-half-desktop, the column will only take up half the width on desktop screens and larger; on smaller screens, it reverts to the default behavior (usually stacking vertically on mobile).

Practical Example: A Responsive Feature Grid

Imagine a "Features" section where you want columns stacked on mobile and three across on desktops. Instead of writing custom CSS, you apply the modifiers directly to the HTML.

<div class="columns">
  <div class="column is-one-third-desktop">
    <div class="box">Feature 1</div>
  </div>
  <div class="column is-one-third-desktop">
    <div class="box">Feature 2</div>
  </div>
  <div class="column is-one-third-desktop">
    <div class="box">Feature 3</div>
  </div>
</div>

Run this in any browser with Bulma CSS linked via CDN or installed via npm. No special permissions are required, as this is client-side CSS. If you want columns to stay side by side even on phones, add the is-mobile class to the .columns container.

Customizing the Grid via Sass

While the default breakpoints work for most projects, some require specific trigger points, such as a wider desktop breakpoint. Because Bulma is built with Sass, you override the global variables before the framework is imported.

This requires a Sass build pipeline (Dart Sass, Vite, Webpack, or similar). You cannot change breakpoints by editing a plain CSS file or via a CDN link alone.

// custom-variables.scss
// Define overrides BEFORE importing Bulma
$desktop: 1100px;
$primary: #4a90e2; // brand color applied across components

@import "bulma";

Risk: if you import Bulma before defining your variables, the framework uses its defaults and your overrides are ignored. Always define variables first. Also note that exact variable names and breakpoint values vary between Bulma versions, so check the version in your package.json against the matching documentation before relying on specific names.

Trade-offs and Limitations

The primary trade-off with Bulma's no-JS philosophy is that interactive components, such as the mobile navbar burger or modals, do not work out of the box. You must write the JavaScript to toggle classes like is-active yourself, or adopt a wrapper library.

Additionally, while the column system is powerful, relying heavily on utility classes can make your HTML verbose. If you find yourself stacking five or six modifiers on a single div, a custom CSS component may be more maintainable.

Verification and Next Steps

To verify your layout works as intended:

• Open your browser's Developer Tools (F12) and toggle the device toolbar to simulate different widths.
• Confirm the .column elements snap from full-width to partial-width exactly at the expected breakpoint.
• For Sass overrides, recompile and inspect a component using $primary to confirm the generated CSS reflects your value.

Start with the equal-width default, add breakpoint modifiers only where the layout demands it, and reserve Sass overrides for genuine brand or breakpoint requirements. That keeps your HTML readable and your stylesheet small.