Skip to main content
The prefixed version of Bulma adds the bulma- prefix to all class names, helping you avoid CSS conflicts when using Bulma alongside other CSS frameworks or existing codebases.

​
Overview

When integrating Bulma into an existing project or using it alongside other CSS frameworks, class name conflicts can occur. The prefixed version solves this by adding bulma- to the beginning of every Bulma class name.

​
File Structure

The prefixed version is available as: 
bulma-prefixed.scss
This file includes all Bulma features with the bulma- prefix: 
@use "../sass" with (
  $class-prefix: "bulma-"
);

​
How It Works

The prefixed version uses Sass’s @use rule with configuration to apply the prefix to all generated class names. This means every Bulma class will have the bulma- prefix.

​
Class Name Examples

<button class="button is-primary">
  Click me
</button>

<div class="container">
  <div class="columns">
    <div class="column is-half">
      Content
    </div>
  </div>
</div>

​
Installation

Import the prefixed version in your SCSS file: 
@import "bulma/versions/bulma-prefixed";
Or reference the compiled CSS version in your HTML: 
<link rel="stylesheet" href="path/to/bulma-prefixed.css">

​
Benefits

No Conflicts

Avoid class name conflicts with other CSS frameworks or existing styles.

Clear Origin

Easily identify which styles come from Bulma in your HTML.

Safe Integration

Safely integrate Bulma into legacy projects without breaking existing styles.

Multiple Frameworks

Use Bulma alongside Bootstrap, Tailwind, or other CSS frameworks.

​
When to Use

Consider using the prefixed version when:
  • Integrating Bulma into an existing project with established CSS
  • Using multiple CSS frameworks in the same project
  • You have generic class names (like .button, .container) that conflict with Bulma
  • Working on a large codebase where clarity about style origins is important
  • Migrating gradually from another CSS framework to Bulma

​
Example Usage

​
Button Component

<button class="bulma-button bulma-is-primary bulma-is-large">
  Primary Button
</button>

​
Grid Layout

<div class="bulma-container">
  <div class="bulma-columns bulma-is-multiline">
    <div class="bulma-column bulma-is-one-quarter">
      <div class="bulma-box">
        Card 1
      </div>
    </div>
    <div class="bulma-column bulma-is-one-quarter">
      <div class="bulma-box">
        Card 2
      </div>
    </div>
  </div>
</div>

​
Form Elements

<div class="bulma-field">
  <label class="bulma-label">Username</label>
  <div class="bulma-control">
    <input class="bulma-input" type="text" placeholder="Enter username">
  </div>
</div>

​
Considerations

Using the prefixed version means you’ll need to update all class names in your HTML. This includes:
  • Component classes (e.g., button becomes bulma-button)
  • Modifier classes (e.g., is-primary becomes bulma-is-primary)
  • Layout classes (e.g., container becomes bulma-container)
  • All helper classes (e.g., has-text-centered becomes bulma-has-text-centered)
The prefix applies to all Bulma classes, including elements, components, layouts, and helpers.

​
Comparison

FeatureStandard BulmaPrefixed Bulma
All features✓✓
Class prefixNonebulma-
Risk of conflictsHigherLower
VerbosityLowerHigher
Integration easeMay conflictConflict-free

​
Custom Prefix

If you want to use a different prefix, you can create your own version by using Sass configuration: 
@use "bulma/sass" with (
  $class-prefix: "my-prefix-"
);
This allows you to customize the prefix to match your project’s naming conventions.

Build docs developers (and LLMs) love

Get started for freeTalk to us