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

Typography helpers

Change the size, weight, and other font properties of the text


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-touch 3rem 3rem unchanged unchanged unchanged
is-size-1-tablet unchanged 3rem 3rem 3rem 3rem
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.


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 align text differently for each viewport width. Simply 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-touch left-aligned left-aligned unchanged unchanged unchanged
has-text-left-tablet-only unchanged left-aligned unchanged unchanged unchanged
has-text-left-tablet unchanged left-aligned left-aligned left-aligned left-aligned
has-text-left-desktop-only unchanged unchanged left-aligned unchanged unchanged
has-text-left-desktop unchanged unchanged left-aligned left-aligned left-aligned
has-text-left-widescreen-only unchanged unchanged unchanged left-aligned unchanged
has-text-left-widescreen unchanged unchanged unchanged left-aligned left-aligned
has-text-left-fullhd unchanged unchanged unchanged unchanged left-aligned

You can use the same logic for each of the 4 alignments.


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 5 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 #

Since 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!