Bulma Typography Helpers
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"> w3wiki </h1> <strong>Bulma Typography</strong> <hr><br> <div> <strong class="is-size-5">Size:</strong> <p class="is-size-2">w3wiki 2</p> <p class="is-size-3">w3wiki 3</p> <p class="is-size-4">w3wiki 4</p> <p>w3wiki 0</p> </div> <hr> <div> <strong class="is-size-5">Alignment</strong> <p class="has-text-centered">w3wiki 1</p> <p class="has-text-justified">w3wiki 2</p> <p class="has-text-left">w3wiki 3</p> <p class="has-text-right">w3wiki 4</p> </div> <hr> <div> <strong class="is-size-5">Transform</strong> <p class="is-capitalized">w3wiki 1</p> <p class="is-lowercase">w3wiki 2</p> <p class="is-uppercase">w3wiki 3</p> <p class="is-underlined">w3wiki 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">w3wiki</h1> <strong>Bulma Typography</strong> <hr> <div> <strong class="is-size-5">Font family</strong> <p class="is-family-sans-serif">w3wiki 1</p> <p class="is-family-monospace">w3wiki 2</p> </div> <div> <strong class="is-size-5">Font weight</strong> <p class="has-text-weight-light">w3wiki 1</p> <p class="has-text-weight-normal">w3wiki 2</p> <p class="has-text-weight-medium">w3wiki 3</p> <p class="has-text-weight-bold">w3wiki 4</p> </div> </body> </html> |
Output:
Reference: https://bulma.io/documentation/helpers/typography-helpers/