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

Documentation

Everything you need to create a website with Bulma

# 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 `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.

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

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

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

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!