Bulma Text transformation
Last Updated :
08 Dec, 2021
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 =
</ 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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...