You are viewing the deprecated 0.5.0 version of the website. Click here to view the latest version

Documentation

Everything you need to create a website with Bulma

Typography helpers

Change the size and color of the text for one or multiple viewport width


Size

There are 7 sizes to choose from:

Class Font-size
is-size-1 3rem
is-size-2 2.5rem
is-size-3 2rem
is-size-4 1.5rem
is-size-5 1.25rem
is-size-6 1rem
is-size-7 0.75rem

Responsive size

You can choose a specific size for each viewport width. You simply needed to append the viewport width to the size modifier.

For example, here are the modifiers for $size-1:

Class Mobile
Up to 768px
Tablet
Between 769px and 1007px
Desktop
Between 1008px and 1199px
Widescreen
Between 1200px and 1391px
FullHD
Above 1392px
is-size-1-mobile

3rem

unchanged

unchanged

unchanged

unchanged

is-size-1-tablet

unchanged

3rem

unchanged

unchanged

unchanged

is-size-1-touch

3rem

3rem

unchanged

unchanged

unchanged

is-size-1-desktop

unchanged

unchanged

3rem

3rem

3rem

is-size-1-widescreen

unchanged

unchanged

unchanged

3rem

3rem

is-size-1-fullhd

unchanged

unchanged

unchanged

unchanged

3rem

You can use the same logic for each of the 7 sizes.


Colors

You can set any element to one of the 9 colors or 9 shades of grey:

Class Color
.has-text-white hsl(0, 0%, 100%)
.has-text-black hsl(0, 0%, 4%)
.has-text-light hsl(0, 0%, 96%)
.has-text-dark hsl(0, 0%, 21%)
.has-text-primary hsl(171, 100%, 41%)
.has-text-info hsl(217, 71%, 53%)
.has-text-success hsl(141, 71%, 48%)
.has-text-warning hsl(48, 100%, 67%)
.has-text-danger hsl(348, 100%, 61%)
.has-text-black-bis hsl(0, 0%, 7%)
.has-text-black-ter hsl(0, 0%, 14%)
.has-text-grey-darker hsl(0, 0%, 21%)
.has-text-grey-dark hsl(0, 0%, 29%)
.has-text-grey hsl(0, 0%, 48%)
.has-text-grey-light hsl(0, 0%, 71%)
.has-text-grey-lighter hsl(0, 0%, 86%)
.has-text-white-ter hsl(0, 0%, 96%)
.has-text-white-bis hsl(0, 0%, 98%)

Alignment

You can align the text with the use of one of 3 alignment helpers:

Class Alignment
.has-text-centered Makes the text centered
.has-text-left Makes the text aligned to the left
.has-text-right Makes the text aligned to the right

This page is open source. Noticed a typo? Or something unclear? Improve this page on GitHub

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!