Building Mobile‑First Layouts with Bulma’s Responsive Columns

Problem: Flexible, Mobile‑First Layouts Are Hard to Achieve

Modern web pages must look good on phones, tablets, and desktops. Developers often end up writing custom CSS, media queries, or JavaScript to make columns stack or resize. The result is fragile code that is hard to maintain.

Thesis: Bulma’s Columns Component Makes It Simple

Bulma’s .columns and .column classes are a pure‑CSS, flexbox‑based grid. They automatically distribute space, support explicit width modifiers, and let you control layout at every breakpoint—all without writing a single line of CSS.

1. Basic Syntax – .columns and .column

At its core, a Bulma grid looks like this:

<div class="columns">
  <div class="column is-4">Left 1/3</div>
  <div class="column is-8">Right 2/3</div>
</div>

The .columns container becomes a flex container with display:flex; flex-wrap:wrap;. Each .column receives a flex-basis that matches the width modifier (e.g., is-4 → 33.33%). If you omit a modifier, the column automatically shares the remaining space evenly.

2. Breakpoint Prefixes – Mobile‑First Design

Bulma’s responsive modifiers let a single column adopt different widths at distinct viewport widths. The syntax is is-{breakpoint}-{size}. For example:

• is-mobile-6 – 50% width on mobile.
• is-tablet-4 – 33% width on tablets.
• is-desktop-8 – 66% width on desktops.

Breakpoint values follow the default Bulma breakpoints: mobile (0‑768px), tablet (769‑1024px), desktop (1025‑1216px), widescreen (1217‑1408px), fullhd (≥1409px). You can verify the actual pixel ranges in the Bulma source or documentation.

3. Nesting – Build Hierarchical Layouts

Because .columns is just a flex container, you can nest it inside any .column. The inner grid inherits the parent’s flex context, allowing complex layouts without additional wrappers.

<div class="columns">
  <div class="column is-6">
    <div class="columns is-multiline">
      <div class="column is-6">Nested 1/2</div>
      <div class="column is-6">Nested 1/2</div>
    </div>
  </div>
  <div class="column is-6">Right side</div>
</div>

The inner .columns uses is-multiline to allow wrapping, which is handy when the nested columns need to stack on smaller screens.

4. Trade‑offs and Limitations

• Browser support: Bulma relies on flexbox. Older browsers like IE10 and earlier will not render the grid correctly, resulting in stacked or misaligned columns.
• Overflow on narrow viewports: Using is-full on very small screens can cause horizontal overflow if child content exceeds 100% width. Adding is-mobile-12 or setting max-width: 100% on child elements mitigates this.
• No JavaScript: While this keeps the component lightweight, you lose dynamic features (e.g., collapse/expand) that some projects may need. You can always combine Bulma with custom scripts if required.

Worked Example – A 3‑Column Card Layout

Below is a complete snippet that showcases a responsive 3‑column layout with nested cards. The left column is 1/3 of the width on desktop, stacks on mobile, and contains two stacked cards. The right column occupies the remaining 2/3.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<div class="columns">
  <div class="column is-4 is-mobile-12">
    <div class="columns is-multiline">
      <div class="column is-12">
        <div class="card">
          <div class="card-content">Card One</div>
        </div>
      </div>
      <div class="column is-12">
        <div class="card">
          <div class="card-content">Card Two</div>
        </div>
      </div>
    </div>
  </div>
  <div class="column is-8 is-mobile-12">
    <div class="card">
      <div class="card-content">Main Content</div>
    </div>
  </div>
</div>

To verify the layout:

1. Open the file in Chrome or Firefox.
2. Open DevTools (F12) and inspect the outer .columns. You should see display:flex; flex-wrap:wrap; in the computed styles.
3. Resize the viewport to ≥1025px and confirm the left column occupies ~33% and the right ~67%.
4. Resize to ≤768px and verify both columns stack vertically, each taking full width.

Actionable Closing – Next Steps

Start using .columns in your own projects by:

• Including the Bulma CSS via CDN or npm.
• Defining your layout with .columns and applying width modifiers.
• Testing across breakpoints with DevTools to ensure mobile‑first behavior.
• Adding is-multiline or nested .columns for more complex grids.

Because Bulma’s column system is pure CSS, you can mix it with any HTML element or other Bulma components without conflict. Keep an eye on browser support for older clients, and consider adding custom media queries if you need to support legacy environments.