Bulma Typography Helpers

Bulma typography helpers classes are used to change the font size, weight, and other font properties of the text.

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`

          
            <div class="container">
  <div class="columns">
    <div class="column"><h2 class="is-size-1">HTML5</h2></div>
    <div class="column"><h2 class="is-size-2">CSS3</h2></div>
    <div class="column"><h2 class="is-size-3">Javascript</h2></div>
    <div class="column"><h2 class="is-size-4">jQuery</h2></div>
    <div class="column"><h2 class="is-size-5">Ajax</h2></div>
    <div class="column"><h2 class="is-size-6">JSON</h2></div>
    <div class="column"><h2 class="is-size-7">MySQL</h2></div>
  </div>
</div>

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

      
        <element class="is-size-1-{mobile | touch | tablet | desktop | widescreen | fullhd } "></element>
:
<element class="is-size-7-{mobile | touch | tablet | desktop | widescreen | fullhd } "></element>

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

      
        <element class="has-text-{left | right | centered | justified}">Text Alignment</element>

Try it now

Source Code

Download

          
            <div class="container">
  <h2 class="has-text-centered mt-6 is-size-2 has-text-centered">Text Alignment</h2>
  <p class="has-text-centered mt-4 has-text-justified">
    There are mainly four text classes that are used to align the text in the web page.
  </p>
  <p class="has-text-left">Left Aligned Text</p>
  <p class="has-text-right">Right Aligned Text</p>
</div>

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

      
        <element class="has-text-{left | right | centered | justified }-{mobile | tablet | desktop | widescreen | fullhd | 
    widescreen-only |widescreen-only |desktop-only | tablet-only|touch }">
         Responsive Text Alignment
</element>

Try it now

Source Code

Download

          
            <div class="container">
  <h2 class="is-size-4 has-text-centered-widescreen has-text-justified-fullhd
  has-text-left-desktop has-text-centered-tablet has-text-centered-mobile">
    sudhakarinfotech
  </h2>
</div>

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

      
        <element class="is-{lowercase|uppercase | italic | underlined}">Text Transformation</element>

Try it now

Source Code

Download

          
            <div class="container">
  <div class="columns">
    <div class="column">
      <h2 class="is-uppercase">sudhakarinfotech</h2>
      <h4 class="is-underlined">Learning Platform</h4>
      <p class="is-lowercase">
        Providing tutorials for HTML5,CSS3,JS,Javascript,Jquery,Ajax,Json,PHP,MySQL,etc.
      </p>
    </div>
  </div>
</div>

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

      
        <element class="has-text-weight-{light | normal | medium | semibold | bold}">Text Font Weight</element>

Try it now

Source Code

Download

          
            <div class="container">
  <div class="columns">
    <div class="column">
      <h2 class="is-uppercase has-text-weight-bold">sudhakarinfotech</h2>
      <h4 class="is-underlined has-text-weight-semibold">Learning Platform</h4>
      <p class="is-lowercase has-text-weight-medium">
        Providing tutorials for HTML5,CSS3,JS,Javascript,Jquery,Ajax,Json,PHP,MySQL,etc.
      </p>
    </div>
  </div>
</div>

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

      
        <element class="is-family-{sans-serif | primary | secondary | code}">Font Family</element>

Try it now

Source Code

Download

          
            <div class="container">
  <h2 class="is-uppercase has-text-weight-bold is-family-sans-serif">sudhakarinfotech</h2>
  <h4 class="is-underlined has-text-weight-semibold is-family-sans-serif">Learning Platform</h4>
  <p class="is-lowercase has-text-weight-medium is-sans-primary">
    Providing tutorials for HTML5,CSS3,JS,Javascript,Jquery,Ajax,Json,PHP,MySQL,etc.
  </p>
</div>

Try it now

Source Code : Output

sudhakarinfotech

Learning Platform

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

Bulma Typography Helpers

Font Size

HTML5

CSS3

Javascript

jQuery

Ajax

JSON

MySQL

Responsive size

Text Alignment

Text Alignment

Responsive Text Alignment

sudhakarinfotech

Text Transformation

sudhakarinfotech

Learning Platform

Text Font Weight

sudhakarinfotech

Learning Platform

Font Family

sudhakarinfotech

Learning Platform

Web Tutorials