Using Bulma’s Column System for Fluid Layouts Without Custom CSS

Problem: Building a responsive grid without writing CSS

When you need a layout that adapts from a single column on phones to multiple columns on tablets and desktops, writing custom media queries can be tedious and error‑prone. Bulma’s column system offers a CSS‑only solution that relies on Flexbox, letting you describe the grid directly in HTML.

How Bulma’s column system works

Bulma provides a set of modifier classes that turn any .columns container into a Flexbox flex container and its direct children .column into flex items. Classes like is-one-half, is-one-third, is-one-quarter set the flex-basis to the corresponding fraction of the container width. Responsive prefixes (is-mobile, is-tablet, is-desktop) apply those fractions only at specific breakpoints, while is-offset-* adds a left margin equal to the gutter size. Nesting columns works because each nested .columns again becomes a flex container, inheriting the parent’s gutter.

Worked example: a three‑column card layout

The following snippet shows a section that displays three equal‑width cards on desktop, stacks them two‑plus‑one on tablet, and falls back to a single column on mobile. No custom CSS is added.

<section class="section">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-one-third-desktop is-half-tablet is-full-mobile">
        <div class="card">
          <div class="card-content">
            <p class="title">Card 1</p>
          </div>
        </div>
      </div>
      <div class="column is-one-third-desktop is-half-tablet is-full-mobile">
        <div class="card">
          <div class="card-content">
            <p class="title">Card 2</p>
          </div>
        </div>
      </div>
      <div class="column is-one-third-desktop is-half-tablet is-full-mobile">
        <div class="card">
          <div class="card-content">
            <p class="title">Card 3</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Explanation:

• is-multiline allows columns to wrap when the total width exceeds the container, enabling the tablet breakpoint behavior.
• At desktop width (≥1024px by default) each column takes is-one-third-desktop → three columns per row.
• At tablet width (≥768px and <1024px) the is-half-tablet class makes each column half the width, so two columns appear per row and the third wraps to the next line.
• On mobile (<768px) is-full-mobile forces each column to occupy the full width, stacking them vertically.

To verify the behavior, open the page in a browser, resize the window, and observe the column wrap points. Using DevTools, inspect a column element and confirm that its computed display is flex and its flex-basis matches the expected percentage (e.g., 33.3333% for is-one-third-desktop).

Trade‑offs and limitations

While Bulma’s column system reduces the need for custom CSS, it introduces some considerations:

• Verbose markup: Complex layouts often require many nested .columns and modifier classes, which can make the HTML harder to read.
• Fixed breakpoints: The responsive prefixes are tied to Bulma’s Sass map ($breakpoints). Changing them without recompiling Sass is not possible; you would need to override with custom CSS, which defeats the “no‑CSS” goal.
• Gutter consistency: The gutter size is defined by the $gap variable. If you need a different spacing for a specific section, you must either accept the global gutter or add custom margin/padding.

These trade‑offs are usually acceptable for rapid prototyping or projects where design consistency outweighs markup brevity.

Actionable closing

If you are starting a new page or component and need a responsive grid that works across browsers without writing media queries, try Bulma’s column classes:

1. Add the Bulma stylesheet (<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">) to your HTML.
2. Wrap your items in <div class="columns"> and give each item a class="column" plus the appropriate responsive modifiers.
3. Test at the default breakpoints (mobile < 768px, tablet ≥ 768px & <1024px, desktop ≥ 1024px) using the browser’s responsive design mode.
4. If you find the markup becoming unwieldy, consider extracting repeated column patterns into a template or component, but keep the grid logic in Bulma’s classes.

By following these steps you can achieve a fluid layout quickly, while retaining the ability to inspect and adjust the underlying Flexbox behavior whenever needed.