Skip to content
Related Articles
Open in App
Not now

Related Articles

Bulma Typography Helpers

Improve Article
Save Article
  • Last Updated : 23 Feb, 2022
Improve Article
Save Article

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=
</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=
</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>


Output:

Reference: https://bulma.io/documentation/helpers/typography-helpers/


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!