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

Responsive Alignment

You can now align text for each viewport width. You simply need to append the viewport width to the alignment modifier.

For example, here are the modifiers for .has-text-left:

Class Mobile
Up to 768px
Tablet
Between 769px and 1007px
Desktop
Between 1008px and 1199px
Widescreen
Between 1200px and 1391px
FullHD
Above 1392px
has-text-left-mobile

left-aligned

unchanged

unchanged

unchanged

unchanged

has-text-left-tablet

unchanged

left-aligned

left-aligned

left-aligned

left-aligned

has-text-left-tablet-only

unchanged

left-aligned

unchanged

unchanged

unchanged

has-text-left-touch

left-aligned

left-aligned

unchanged

unchanged

unchanged

has-text-left-desktop

unchanged

unchanged

left-aligned

left-aligned

left-aligned

has-text-left-desktop-only

unchanged

unchanged

left-aligned

unchanged

unchanged

has-text-left-widescreen

unchanged

unchanged

unchanged

left-aligned

left-aligned

has-text-left-widescreen-only

unchanged

unchanged

unchanged

left-aligned

unchanged

has-text-left-fullhd

unchanged

unchanged

unchanged

unchanged

left-aligned


Text transformation

You can transform the text with the use of one of 3 text transformation helpers:

Class Transformation
.is-capitalized Transforms the first character of each word to uppercase
.is-lowercase Transforms all characters to lowercase
.is-uppercase Transforms all characters to uppercase

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!