--- layout: documentation doc-tab: overview doc-subtab: variables --- {% include subnav-overview.html %}

Variables

Easily customize Bulma to match your design

Bulma has 1 variable file divided into 4 sections:

  • Initial variables: where you define variables by direct value, like:
    • colors: $blue: #42afe3
    • font families: $family-sans-serif: "Helvetica Neue", "Helvetica", "Arial", sans-serif
    • font sizes: $size-1: 48px
    • other values: $nav-height: 50px or $easing: ease-out
  • Primary colors derived from the initial variables:
    • $primary: $turquoise
    • $info: $blue
    • $success: $green
    • $warning: $yellow
    • $danger: $red
    • $dark: $grey-darker
    • $text: $grey-dark
  • Generated variables where variables are calculated from the values set in the previous file. For example, you can have:
    • $body-background: $white: the page's main background
    • $link: $primary: the links use the primary color
    • $family-primary: $family-sans-serif: the primary font family is the sans-serif one
  • Lists and maps which are collections so already defined variables:
    • $colors: (dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert))
    • $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6

To override any of these variables, just set them before importing Bulma.

1. Initial variables
Colors
$black #0a0a0a
$grey-darker #363636
$grey-dark #4a4a4a
$grey #7a7a7a
$grey-light #b5b5b5
$grey-lighter #dbdbdb
$white #fff
$blue #3273dc
$green #23d160
$orange #ff470f
$purple #b86bff
$red #ff3860
$turquoise #00d1b2
$yellow #ffdd57
Typography
$family-sans-serif -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
$family-monospace "Inconsolata", "Consolas", "Monaco", monospace
$size-1 48px
$size-2 40px
$size-3 28px
$size-4 24px
$size-5 18px
$size-6 14px
$size-7 11px
$weight-normal 400
$weight-bold 700
$weight-title-normal 300
$weight-title-bold 500
Breakpoints
$tablet 769px
$desktop 980px
$widescreen 1180px
Miscellaneous
$easing ease-out
$radius 3px
$speed 86ms
2. Primary colors
$primary $turquoise
$info $blue
$success $green
$warning $yellow
$danger $red
$light $grey-lighter
$dark $grey-dark
$text $grey-dark
3. Generated variables
Invert colors
$primary-invert findColorInvert($primary)
$info-invert findColorInvert($info)
$success-invert findColorInvert($success)
$warning-invert findColorInvert($warning)
$danger-invert findColorInvert($danger)
$light-invert $dark
$dark-invert $light
General colors
$body-background $grey-lighter
$background $grey-lighter
$border $grey-light
$border-hover $grey
Text colors
$text-invert findColorInvert($text)
$text-light $grey
$text-strong $grey-darker
Code colors
$code $red
$code-background $background
$pre $text
$pre-background $background
Link colors
$link $primary
$link-invert $primary-invert
$link-visited $purple
$link-hover $grey-darker
$link-hover-background $grey-lighter
$link-hover-border $grey-darker
$link-active $grey-darker
$link-active-border $grey-darker
Control colors
$control $text-strong
$control-background $text-invert
$control-border $border
$control-hover $link-hover
$control-hover-border $border-hover
$control-active $link
$control-active-background $link
$control-active-background-invert $link-invert
$control-active-border $link
Typography
$family-primary $family-sans-serif
$family-code $family-monospace
$size-small $size-7
$size-normal $size-6
$size-medium $size-5
$size-large $size-3
4. Lists and maps
$colors (white: ($white, $black),
black: ($black, $white),
light: ($light, $light-invert),
dark: ($dark, $dark-invert),
primary: ($primary, $primary-invert),
info: ($info, $info-invert),
success: ($success, $success-invert),
warning: ($warning, $warning-invert),
danger: ($danger, $danger-invert))
$sizes $size-1 $size-2 $size-3 $size-4 $size-5 $size-6