Bulma Text transformation

Bulma text transformation is used to set the transformation of text like if you want the text italic, underlined or capitalized, etc. then you can use these classes to define that.

Text transformation classes:

is-capitalized: This class is used to capitalize the whole text inside the tag where you used this class.
is-lowercase: This class is used to lowercase the whole text inside the tag where you used this class.
is-uppercase: This class is used to uppercase the whole text inside the tag where you used this class.
is-italic: This class is used to italic the whole text inside the tag where you used this class.
is-underlined: This class is used to underline the whole text inside the tag where you used this class.

Example: The below example illustrate the text transformation class in Bulma.

HTML

<!DOCTYPE html> 

<html> 

<head> 

    <title>Bulma Panel</title> 

    <link rel='stylesheet'

          href= 

'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 

</head> 

<body class="has-text-centered"> 

    <h1 class="is-size-2 has-text-success"> 

        GeeksforGeeks 

    </h1> 

    <b>Bulma Text transformation</b> 

    <br> 

    <div class="container"> 

        <p class="is-capitalized is-size-4">geeksforGeeks</p> 

        <p class="is-lowercase is-size-4">GeeksforGeeks</p> 

        <p class="is-uppercase is-size-4">GeeksforGeeks</p> 

        <p class="is-italic is-size-4">GeeksforGeeks</p> 

        <p class="is-underlined is-size-4">GeeksforGeeks</p> 

    </div> 

</body> 

</html>

Output:

Text transformation

Reference: https://bulma.io/documentation/helpers/typography-helpers/#text-transformation

Article Tags :

CSS

Web Technologies

Bulma