Use Bulma Breakpoint Suffixes for Responsive Columns

The problem: your layout stacks on every screen

You add Bulma to a project, drop in a few .column elements, and everything looks fine on a wide monitor. Then you open the page on a phone and the columns are still side-by-side, cramped and unreadable. You could write custom media queries, but Bulma already ships with responsive column modifiers that handle the switch for you.

The useful takeaway: append a breakpoint suffix to a column class, such as is-full-mobile is-half-tablet, and Bulma changes the width at that breakpoint without any custom CSS.

How Bulma responsive columns work

Bulma's grid is a flexbox system. A .columns container turns its direct .column children into flex items. Width is controlled by modifier classes like is-half, is-one-third, is-one-quarter, and is-full.

Bulma is mobile-first by default. A class without a suffix applies at every breakpoint unless a later suffix overrides it. The breakpoint suffixes are:

• -mobile: applies from the smallest viewport up
• -tablet: applies at tablet width and above
• -desktop: applies at desktop width and above
• -widescreen: applies at widescreen width and above
• -fullhd: applies at full HD width and above

Exact pixel boundaries are defined in Bulma's Sass variables and can differ between versions, so check your installed version's variables file if you need precise numbers.

Worked example: a three-column card grid

Suppose you want product cards to stack on phones, show two per row on tablets, and three per row on desktops. Here is the markup:

<link rel="stylesheet" href="/css/bulma.min.css">

<div class="columns is-multiline">
  <div class="column is-full-mobile is-half-tablet is-one-third-desktop">
    <div class="card">
      <div class="card-content">Product A</div>
    </div>
  </div>
  <div class="column is-full-mobile is-half-tablet is-one-third-desktop">
    <div class="card">
      <div class="card-content">Product B</div>
    </div>
  </div>
  <div class="column is-full-mobile is-half-tablet is-one-third-desktop">
    <div class="card">
      <div class="card-content">Product C</div>
    </div>
  </div>
</div>

is-multiline lets columns wrap to the next row instead of shrinking to fit. On mobile, is-full-mobile makes each card take the full width. On tablet, is-half-tablet makes two cards fit per row. On desktop, is-one-third-desktop makes three cards fit per row.

Verify the behavior in the browser

Open the page in a browser and use dev tools to confirm the grid is working as intended:

1. Resize the viewport from narrow to wide.
2. Right-click a column and choose Inspect.
3. Confirm the .columns element has display: flex in the Computed or Styles pane.
4. Watch the computed width of a column as you cross each breakpoint. It should jump from 100 percent to 50 percent to roughly 33 percent.

If the width does not change, check for custom CSS that overrides Bulma's flex rules, and confirm the column is a direct child of .columns. Bulma does not ship with a CSS reset, so global styles can interfere with gutters and container padding.

Trade-offs and limitations

• No JavaScript dependency: the grid is pure CSS, so it works with any backend or frontend framework.
• Version drift: breakpoint values and modifier names can change between Bulma releases. Pin the Bulma version in production and review the changelog before upgrading.
• Nesting complexity: deeply nested .columns structures increase specificity and make overrides harder without custom Sass.
• Content overflow: flex column classes do not prevent long unbreakable strings from stretching containers. Use text-truncation utilities or overflow handling where needed.

Pick one responsive section in your project, replace any custom media-query rules with Bulma suffixes, then resize the browser and inspect the computed widths. If the columns stack and expand at the right breakpoints, you can delete the custom CSS and rely on Bulma's built-in grid.