Typography helpers

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

There are 7 sizes to choose from:

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.

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

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

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

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!