Customizable

Bulma has more than 300 variables, making almost any value in Bulma easy to override, allowing you to define a very personalized setup.

By using SASS, you can set your own initial variables, like overriding the blue color value, or the primary font family, or even the various responsive breakpoints.

// 1. Import the initial variables
@import "../sass/utilities/initial-variables"
@import "../sass/utilities/functions"

// 2. Set your own initial variables
// Update blue
$blue: #72d0eb

// Add pink and its invert

$pink: #ffb3b3
$pink-invert: #fff

// Add a serif family
$family-serif: "Merriweather", "Georgia", serif

// 3. Set the derived variables
// Use the new pink as the primary color
$primary: $pink
$primary-invert: $pink-invert

// Use the existing orange as the danger color
$danger: $orange

// Use the new serif family
$family-primary: $family-serif

// 4. Import the rest of Bulma
@import "../bulma"

Each Bulma component also comes with its own set of variables:

• box has its own shadow
• columns have their own gap
• menu has its own background and foregroud colors
• button and input have colors for each of their states (hover, active, focus…)
• etc.

Each documentation page comes with the list of available variables to override.