Skip to content
Related Articles
Get the best out of our app
GFG App
Open App
geeksforgeeks
Browser
Continue

Related Articles

Bulma Typography Helpers

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like 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
Last Updated : 23 Feb, 2022
Like Article
Save Article
Similar Reads
Related Tutorials