There are 7 sizes to choose from:
You are viewing the deprecated 0.6.1 version of the website. Click here to view the latest version
Documentation
Everything you need to create a website with Bulma
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 |
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 1023px
|
Desktop Between 1024px and 1215px
|
Widescreen Between 1216px and 1407px
|
FullHD1408px and above
|
---|---|---|---|---|---|
is-size-1-mobile |
|
unchanged |
unchanged |
unchanged |
unchanged |
is-size-1-tablet |
unchanged |
|
unchanged |
unchanged |
unchanged |
is-size-1-touch |
|
|
unchanged |
unchanged |
unchanged |
is-size-1-desktop |
unchanged |
unchanged |
|
|
|
is-size-1-widescreen |
unchanged |
unchanged |
unchanged |
|
|
is-size-1-fullhd |
unchanged |
unchanged |
unchanged |
unchanged |
|
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:
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%)
|
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 |
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
|
FullHD1408px 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 |
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 |
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-semibold |
Transforms text weight to semi-bold |
has-text-weight-bold |
Transforms text weight to bold |
This page is open source.
Noticed a typo? Or something unclear?
Improve this page on GitHub
Bulma Partners
Check out their products!