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

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 need 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(204, 86%, 53%)
has-text-link 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 4 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
is-italic Transforms all characters to italic

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-medium Transforms text weight to medium
has-text-weight-semibold Transforms text weight to semi-bold
has-text-weight-bold Transforms text weight to bold

Font family #

New! 0.7.4

You can change the font family with the use of one of 5 font family helpers:

Class Family
is-family-sans-serif Sets font family to $family-sans-serif
is-family-monospace Sets font family to $family-monospace
is-family-primary Sets font family to $family-primary
is-family-secondary Sets font family to $family-secondary
is-family-code Sets font family to $family-code

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

#native_company# #native_desc#
#native_cta#
New!

The official Bulma book! 😲

by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning

A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.

Formats available:
PDF Epub Mobi
or
Kindle

Newsletter

Features, releases, showcase… stay in the loop!