Bulma v0.5.0: a modern CSS framework based on Flexbox

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`

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`

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

is-size-1-tablet

unchanged

3rem

unchanged

is-size-1-touch

3rem

unchanged

is-size-1-desktop

unchanged

3rem

is-size-1-widescreen

unchanged

3rem

is-size-1-fullhd

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%)`

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

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

Typography helpers

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

Size

Responsive size

Colors

Alignment