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 1023px
Desktop
Between 1024px and 1215px
Widescreen
Between 1216px and 1407px
FullHD
1408px and above
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 4 alignment helpers:

Class Alignment
has-text-centered Makes the text centered
has-text-justified Makes the text justified
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 1023px
Desktop
Between 1024px and 1215px
Widescreen
Between 1216px and 1407px
FullHD
1408px and above
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

Text weight #

You can transform the text weight with the use of one of 4 text weight helpers:

Class Weight
has-text-weight-light Transforms text weight to light
has-text-weight-normal Transforms text weight to normal
has-text-weight-semibold Transforms text weight to semi-bold
has-text-weight-bold Transforms text weight to bold

Made with Bulma
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!