Skip to main content
There are multiple ways to install and use Bulma in your project. Choose the method that best fits your workflow.

​
Package managers

Install Bulma as a dependency in your project using your preferred package manager. 
npm install bulma
After installation, Bulma will be available in your node_modules/bulma directory.

​
CDN

For quick prototyping or simple projects, use a CDN to include Bulma directly in your HTML.

​
jsDelivr (recommended)

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"
/>
jsDelivr is a fast, reliable CDN that automatically serves the latest version if you remove the version number from the URL.

​
unpkg

<link
  rel="stylesheet"
  href="https://unpkg.com/[email protected]/css/bulma.min.css"
/>

​
Importing Bulma

How you import Bulma depends on your build setup and whether you want to use the compiled CSS or customize it with Sass.

​
Import compiled CSS

If you just want to use Bulma’s default styles, import the pre-built CSS file. 
import 'bulma/css/bulma.css';

​
Import Sass for customization

To customize Bulma, import the Sass source files. This requires a Sass compiler in your build process. 
@use "bulma";
The main entry point bulma.scss imports all Bulma modules:
node_modules/bulma/bulma.scss
@charset "utf-8";

/*! bulma.io v1.0.4 | MIT License | github.com/jgthms/bulma */
@use "sass";
Bulma v1.0+ uses the modern Sass @use syntax instead of @import. Make sure your Sass compiler supports this syntax.

​
Import specific modules

You can import only the Bulma modules you need to reduce bundle size: 
// Import only utilities and base
@use "bulma/sass/utilities";
@use "bulma/sass/base";

// Import specific components
@use "bulma/sass/elements/button";
@use "bulma/sass/elements/title";
@use "bulma/sass/components/card";
@use "bulma/sass/components/navbar";
Bulma’s module structure:
  • utilities/ - Functions, mixins, and variables
  • themes/ - Light and dark theme definitions
  • base/ - Generic styles and reset
  • elements/ - Basic UI elements
  • form/ - Form controls and inputs
  • components/ - Complex multi-part components
  • grid/ - Columns layout system
  • layout/ - Container, hero, section, footer
  • helpers/ - Utility classes

​
Build versions

Bulma provides several pre-built versions for different use cases. These are available in the css/versions/ directory.

​
Standard version

The default build includes all features: 
css/bulma.css         (unminified, with source maps)
css/bulma.min.css     (minified for production)

​
Specialized versions

Excludes dark mode styles if you don’t need theme switching. Results in a smaller file size.
<link rel="stylesheet" href="node_modules/bulma/css/versions/bulma-no-dark-mode.min.css">
Excludes helper classes (spacing, colors, typography utilities) if you’re using your own utility system.
<link rel="stylesheet" href="node_modules/bulma/css/versions/bulma-no-helpers.min.css">
All classes are prefixed with bulma- to avoid naming conflicts with other frameworks.
<link rel="stylesheet" href="node_modules/bulma/css/versions/bulma-prefixed.min.css">

<!-- Use classes like bulma-button, bulma-card, etc. -->
<button class="bulma-button bulma-is-primary">Click me</button>
Combines both: no helpers and prefixed class names.
<link rel="stylesheet" href="node_modules/bulma/css/versions/bulma-no-helpers-prefixed.min.css">

​
Setting up a Sass build

If you’re customizing Bulma with Sass, you’ll need a build process. Here’s a basic setup using the Sass CLI.
1

Install Sass

Install the Sass compiler as a dev dependency:
npm install --save-dev sass
2

Create your Sass file

Create a main Sass file that imports Bulma:
src/styles/main.scss
// Your variable overrides
@use "bulma/sass/utilities" with (
  $primary: #8e44ad,
  $family-sans-serif: ('Roboto', sans-serif)
);

// Import all of Bulma
@use "bulma";

// Your custom styles
.my-custom-class {
  color: $primary;
}
3

Add build script

Add a build script to your package.json:
package.json
{
  "scripts": {
    "build:css": "sass src/styles/main.scss dist/styles.css",
    "watch:css": "sass --watch src/styles/main.scss dist/styles.css"
  }
}
4

Build your CSS

Run the build script:
npm run build:css
For development with automatic rebuilds:
npm run watch:css

​
Verification

To verify Bulma is working, create a simple HTML file:
index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bulma Test</title>
  <link rel="stylesheet" href="path/to/bulma.css">
</head>
<body>
  <section class="section">
    <div class="container">
      <h1 class="title">Hello Bulma!</h1>
      <p class="subtitle">If you can see styled text, Bulma is working.</p>
      <button class="button is-primary">Primary Button</button>
    </div>
  </section>
</body>
</html>
If the button appears styled with a purple/blue background, Bulma is successfully installed.

​
Next steps

Quickstart guide

Build your first component with Bulma

Customization

Learn how to customize Bulma’s variables and themes

Build docs developers (and LLMs) love

Get started for freeTalk to us