Documentation

Everything you need to create a website with Bulma

3 ways to start

You only need 1 CSS file to use Bulma


1

Use NPM (recommended):

npm install bulma

Font Awesome icons

If you want to use icons with Bulma, don't forget to include Font Awesome:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Customizing with Sass

If you're familiar with Sass and want to customize Bulma with your own colors and variables, just install Bulma via npm:

2

Set your variables:

// Override initial variables here
// You can add new ones or update existing ones:

$blue: #72d0eb // Update blue
$pink: #ffb3b3 // Add pink
$family-serif: "Georgia", serif // Add a serif family

// Override generated variables here
// For example, by default, the $danger color is $red and the font is sans-serif
// You can change these values:

$danger: $orange // Use the existing orange
$family-primary: $family-serif // Use the new serif family

3

Import Bulma after having set your variables:

// Override variables here
// You can add new ones or update existing ones:

$blue: #72d0eb // Update blue
$pink: #ffb3b3 // Add pink
$family-serif: "Georgia", serif // Add a serif family

// Override generated variables here
// For example, by default, the $danger color is $red and the font is sans-serif
// You can change these values:

$danger: $orange // Use the existing orange
$family-primary: $family-serif // Use the new serif family

@import "bulma"

Bulma Newsletter

Get notified when v1 is ready!