Bulma Typography Helpers

Bulma typography helpers classes are 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

      
        <element class="is-size-{1 | 2 |  3 | 4 | 5 | 6 | 7}"></element>      
    
Try it now

Source Code

          
            <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

          
            <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

          
            <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

          
            <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

          
            <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

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

Web Tutorials
Bulma Typography Helpers
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4