Bulma Typography Helpers

Last Updated : 23 Feb, 2022

Bulma is a free, open-source framework of CSS to build responsive websites. It is based on the Flexbox. In this article, we will discuss Typography helpers. Typography helpers help us to change the properties like changing size, weight, alignment, font family, etc. Below are some properties of Typography helpers that we can use.

Typography helpers:

Size: We can change the size of the text. Ex: is-size-1
Responsive size: We can specify the size of each viewport. Ex: is-size-1-mobile
Alignment: We can align the text. Ex: has-text-centered
Responsive alignment: We can align text for different viewports. Ex: has-text-left-mobile
Text transformation: We can transform any text. Ex: is-capitalized
Text weight: We can change the text weight. Ex: has-text-weight-light
Font family: We can change the font family of any text. Ex: is-family-sans-serif

Syntax:

<element class="Typography-Helpers-Class">
...
</element>

Below examples illustrate the Bulma Typography Helpers:

Example 1:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bulma Typography</title> 
    <link rel='stylesheet' href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
</head> 
  
<body> 
    <h1 class="is-size-2 has-text-success"> 
        GeeksforGeeks 
    </h1> 
    <strong>Bulma Typography</strong> 
    <hr><br> 
  
    <div> 
        <strong class="is-size-5">Size:</strong> 
        <p class="is-size-2">Geeksforgeeks 2</p> 
        <p class="is-size-3">Geeksforgeeks 3</p> 
        <p class="is-size-4">Geeksforgeeks 4</p> 
        <p>Geeksforgeeks 0</p> 
    </div> 
    <hr> 
    <div> 
        <strong class="is-size-5">Alignment</strong> 
        <p class="has-text-centered">Geeksforgeeks 1</p> 
        <p class="has-text-justified">Geeksforgeeks 2</p> 
        <p class="has-text-left">Geeksforgeeks 3</p> 
        <p class="has-text-right">Geeksforgeeks 4</p> 
    </div> 
    <hr> 
    <div> 
        <strong class="is-size-5">Transform</strong> 
        <p class="is-capitalized">Geeksforgeeks 1</p> 
        <p class="is-lowercase">Geeksforgeeks 2</p> 
        <p class="is-uppercase">Geeksforgeeks 3</p> 
        <p class="is-underlined">Geeksforgeeks 4</p> 
    </div> 
</body> 
  
</html> 

Output:

Example 2:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bulma Typography</title> 
    <link rel='stylesheet' href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
</head> 
  
<body> 
    <h1 class="is-size-2 has-text-success">GeeksforGeeks</h1> 
    <strong>Bulma Typography</strong> 
    <hr> 
    <div> 
        <strong class="is-size-5">Font family</strong> 
        <p class="is-family-sans-serif">Geeksforgeeks 1</p> 
        <p class="is-family-monospace">Geeksforgeeks 2</p> 
    </div> 
    <div> 
        <strong class="is-size-5">Font weight</strong> 
        <p class="has-text-weight-light">Geeksforgeeks 1</p> 
        <p class="has-text-weight-normal">Geeksforgeeks 2</p> 
        <p class="has-text-weight-medium">Geeksforgeeks 3</p> 
        <p class="has-text-weight-bold">Geeksforgeeks 4</p> 
    </div> 
</body> 
  
</html> 