Bulma Typography

Bulma Typography Helpers

Bulma typography Helpers modifier class is used to change the font size, weight, and other font properties of the text.

Font Size

Bulma CSS provides 7 modifier class that is used to change the text font size. These are:

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

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

HTML5

CSS3

Javascript

jQuery

Ajax

JSON

MySQL

Responsive size

You can choose a specific size for each viewport width. You simply need to append the viewport width to the size modifier.

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

General Syntax

Try it now

Text Alignment

There are mainly four text alignment classes that are used to align text on the web page. These are following predefined classes has-text-centered,has-text-left,has-text-right, has-text-justified

Class Alignment
has-text-centered - It is used to align the text in the centered.
has-text-left - It aligns the text in the left direction.
has-text-right - It aligns the text into right directions.
has-text-justified - It makes the text justified.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Text Alignment

There are mainly four text classes that are used to align the text in the web page.

Left Aligned Text

Right Aligned Text

Responsive Text Alignment

You can align text differently with respect to different viewport widths. You have to append the viewport width i.e {mobile | tablet | desktop | widescreen | fullhd} to the alignment modifier i.e has-text-left such as has-text-left-{ mobile | tablet | desktop | widescreen | fullhd | widescreen-only | widescreen-only | desktop-only | tablet-only | touch }. For example has-text-left-mobile, has-text-left-touch, has-text-left-desktop-only.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

sudhakarinfotech

Text Transformation

There are five predefined classes that are used to transform text. These classes are:is-capitalized, is-lowercase,is-uppercase,is-italic,is-underlined

Class Transformation
is-capitalized -It is used to transform the first character of each word to uppercase.
is-lowercase -It is used to transform all characters to lowercase.
is-uppercase -It is used to transfer all the character to uppercase.
is-italic -It is used to transform all the character to italic.
is-underlined -It is used to underline the text content.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

sudhakarinfotech

Learning Platform

Providing tutorials for HTML5,CSS3,JS,Javascript,Jquery,Ajax,Json,PHP,MySQL,etc.

Text Font Weight

There are mainly 5 predefined helper classes that are used to give the text weight. These are following helper classes:has-text-weight-light, has-text-weight-normal, has-text-weight-medium, has-text-weight-semibold, has-text-weight-bold.

Class Weight
has-text-weight-light -It is used to transform the text weight to light.
has-text-weight-normal -It is used to transform the text weight to normal.
has-text-weight-medium -It is used to transform the text weight to medium.
has-text-weight-semibold -It is used to transform the text weight to semibold.
has-text-weight-bold -It is used to transform the text weight to bold.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

sudhakarinfotech

Learning Platform

Providing tutorials for HTML5,CSS3,JS,Javascript,Jquery,Ajax,Json,PHP,MySQL,etc.

Font Family

Bulma CSS provides the following predefined classes that are used to change the font family. These classes are is-family-sans-serif, is-family-monospace, is-family-primary, is-family-secondary, is-family-code.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

sudhakarinfotech

Learning Platform

Providing tutorials for HTML5,CSS3,JS,Javascript,Jquery,Ajax,Json,PHP,MySQL,etc.