Stop overriding Bulma with custom CSS: Sass variables and responsive columns

The problem: custom CSS piled on top of Bulma

A common Bulma setup starts with the framework CSS, then adds a custom stylesheet to change brand colors, adjust spacing, and rewrite column widths with media queries. Over time, specificity fights make it hard to tell which rule wins, and the final CSS ships both Bulma's defaults and your overrides.

The useful takeaway is to customize Bulma while it compiles, not after it loads. Set Sass variables before importing Bulma, and use Bulma's responsive column modifiers instead of writing custom breakpoints. This keeps the generated CSS smaller and easier to audit.

Set theme variables before Bulma compiles

Bulma is written in Sass. Its stylesheet reads variables such as $primary, $family-primary, $success, $warning, and $danger while it generates CSS. If you change those variables after the import, Bulma's output keeps the original values.

Create an entry file that sets variables first, then imports Bulma:

// Where: your project root, in src/styles/entry.scss
// Permissions: read/write access to the entry file and output directory
// Risk: the compile command overwrites the destination CSS. Restore the previous file from version control if you need to roll back.

$primary: #7b2cbf;
$family-primary: "Inter", sans-serif;
$success: #2ecc71;

@import "bulma";

Compile it from the terminal:

sass src/styles/entry.scss dist/css/app.css

Check the result:

grep -n "#7b2cbf" dist/css/app.css

Expected check: at least one line contains your brand color. If the file contains Bulma's default color instead, the variable was set after the import or the wrong entry file was compiled.

Build layouts with responsive column modifiers

Bulma's .columns element is a flexbox container for .column children. A bare width class such as is-half applies at every viewport. A suffixed modifier such as is-one-third-tablet applies starting at that breakpoint, so you can change column widths without custom media queries.

<div class="columns">
  <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
    <p>This column is half width on mobile, one third on tablet, and one quarter on desktop.</p>
  </div>
  <div class="column">
    <p>This column takes the remaining space.</p>
  </div>
</div>

Verify in the browser rather than assuming the breakpoint behavior:

1. Open the page in Chrome or Firefox DevTools.
2. Open the device toolbar and select a tablet width.
3. Inspect the column and confirm its computed width matches the modifier you expect.
4. Repeat at desktop and widescreen widths.

If the layout does not change at the expected breakpoint, confirm the installed Bulma version. Breakpoint names and pixel thresholds can differ between releases.

Trade-offs and limitations

• Bulma is CSS-only. Dropdowns, modals, tabs, and navbar toggles need your own JavaScript for show/hide behavior, ARIA attributes, and keyboard focus.
• Avoid deep column nesting. Putting .columns inside .column can create unexpected flex containment and sizing. Prefer flat column structures or Bulma Tiles for complex grids.
• Variable names change. Before adopting a variable or breakpoint in production, inspect your installed Bulma version and its changelog.
• This requires a Sass build step. If you load Bulma from a CDN as compiled CSS, you cannot customize its variables without overriding rules later.

Verify and ship

1. Compile your Sass entry with brand variables set before the Bulma import.
2. Search the compiled CSS for your brand color and confirm no later rule overrides it.
3. Render one page with responsive column classes and check the layout at each targeted breakpoint using DevTools device emulation.
4. Replace one custom media query on an existing page with a Bulma column modifier, then confirm the custom rule can be removed.

Start with a single page or component. Once the compiled output and breakpoint behavior match your expectations, expand the pattern to the rest of the layout.