Skip to content
Get packs

Guide · Open source

How to use Bulma: install, add styles and build a page

Updated · written with AI from the project's own documentation and checked against our catalogue data

Bulma is a modern CSS framework built on Flexbox. It ships as a single CSS file with ready-made classes for layout and common interface elements, so you can style a web page without writing much custom CSS. This guide shows you how to install it, load it into a project, customize it, and understand what it does not include.

Bulmajgthms/bulma · ★ 50k · MIT

Quick start

  1. 1Install the package. Run npm install bulma or yarn add bulma in your project folder.
  2. 2Import the CSS. Add @import 'bulma/css/bulma.css' to your stylesheet, as shown in the README.
  3. 3Apply Bulma classes. Add Bulma's classes to your HTML elements for layout and common interface parts.
  4. 4Customize if needed. Download the Sass source files and change the variables to match your design.
  5. 5Add your own JavaScript. Write or include the scripts you need for interactive elements such as modals or dropdowns.
  6. 6Check browser support. Confirm that your target browsers are among the recent versions the README lists.

What Bulma is and what it is not

Bulma is a CSS framework. Its only output is a single CSS file, bulma.css, which you can use as-is or customize by downloading the Sass source files.

Bulma contains no JavaScript. Interactive behavior such as modals or dropdowns must come from your own scripts. The project describes Bulma as environment agnostic: it is the style layer on top of your logic.

Install Bulma with npm or Yarn

Bulma is installed through a package manager. The README lists npm and Yarn as options, and also mentions Bower and a CDN delivered through jsDelivr.

Run one of the following commands in your project folder.

npm install bulma yarn add bulma

Import the Bulma CSS file into your project

After installation, import the CSS file into your project. The README gives this snippet, which points to the file inside the installed package.

If you prefer not to install anything, the README links to a jsDelivr CDN page for the npm package.

@import 'bulma/css/bulma.css'

Build a page with Bulma classes

Once the stylesheet is loaded, you apply Bulma's ready-made classes to your HTML elements for layout and common interface elements. The full list of classes and how they work is in the official documentation at bulma.io, which the README links to as the online documentation.

Bulma is built on Flexbox, so layout relies on Flexbox behavior in the browser.

Customize Bulma with Sass variables

If you want your own look, download the Sass source files instead of using the compiled CSS. You can then change the Sass variables to customize the styles. The customization options are described in the documentation's customize section.

Teams that want a fixed, opinionated look should note that much of Bulma's appearance is meant to be customized.

Add your own JavaScript for interactive parts

Because Bulma has no JavaScript, any interactive behavior is your responsibility. Projects that already have their own JavaScript only need the style layer. Developers using Vue, React, or other frameworks can look at the related projects listed in the README, which include Bulma-based component libraries such as Buefy, Bloomer, and React Bulma Components.

Check browser support before you commit

Bulma uses autoprefixer to make most Flexbox features work in earlier browser versions. According to the README, it is compatible with recent versions of Chrome, Edge, Firefox, Opera, and Safari.

Internet Explorer 10 and later is only partially supported, so check this against your audience before choosing Bulma.

What people use it for

  • Styling a simple web page with a consistent layout and common interface elements without writing much custom CSS.
  • Adding a style layer to a project that already has its own JavaScript.
  • Creating a themed site by changing Bulma's Sass variables.
  • Building an app with Vue, React, or another framework using a Bulma-based component library.

Frequently asked questions

How do I install Bulma?

Run npm install bulma or yarn add bulma in your project folder. Then import the CSS file with @import 'bulma/css/bulma.css'. The README also points to a CDN through jsDelivr.

Is Bulma free to use?

Bulma is released under the MIT licence, as listed on its repository page. Check the license file in the repository for the full terms.

Does Bulma include JavaScript for modals and dropdowns?

No. Bulma contains no JavaScript, so interactive components need your own scripts. Bulma is only the style layer.

Does Bulma work in Internet Explorer?

The README says Internet Explorer 10 and later is only partially supported. It is compatible with recent versions of Chrome, Edge, Firefox, Opera, and Safari.

How is Bulma different from Bootstrap or Tailwind CSS?

Bulma is a Flexbox-based CSS framework with ready-made classes and no JavaScript. Bootstrap, Tailwind CSS, Foundation, and Pure.css are comparable projects, but this guide does not compare their features in detail.

Can I customize Bulma's colors and styles?

Yes. Download the Sass source files and change the variables. The README says much of the appearance is meant to be customized.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Bulma suits developers who want a quick, consistent styling baseline, or a style layer for a project that already has its own JavaScript. Pick something else if you need interactive components out of the box, full Internet Explorer support, or a fixed opinionated design.

Install options & downloads