Customize the text properties using the following typography helpers.
Use the following classes to customize the font-size property of any element, using the values defined in the fontSizes scale:
| Class | Property |
|---|---|
has-size-0 | Will apply the font size defined in fontSizes[0]. By default 0.75rem; |
has-size-1 | Will apply the font size defined in fontSizes[1]. By default 1rem; |
has-size-2 | Will apply the font size defined in fontSizes[2]. By default 1.25rem; |
has-size-3 | Will apply the font size defined in fontSizes[3]. By default 1.5rem; |
has-size-4 | Will apply the font size defined in fontSizes[4]. By default 2rem; |
has-size-5 | Will apply the font size defined in fontSizes[5]. By default 2.5rem; |
has-size-6 | Will apply the font size defined in fontSizes[6]. By default 3rem; |
has-size-7 | Will apply the font size defined in fontSizes[7]. By default 3.5rem; |
has-size-8 | Will apply the font size defined in fontSizes[8]. By default 4rem; |
has-size-9 | Will apply the font size defined in fontSizes[9]. By default 4.5rem; |
Example:
<div class="has-size-0">The quick brown fox jumps over the lazy dog.</div> <div class="has-size-1">The quick brown fox jumps over the lazy dog.</div> <div class="has-size-2">The quick brown fox jumps over the lazy dog.</div> <div class="has-size-3">The quick brown fox jumps over the lazy dog.</div> <div class="has-size-4">The quick brown fox jumps over the lazy dog.</div> <div class="has-size-5">The quick brown fox jumps over the lazy dog.</div> <div class="has-size-6">The quick brown fox jumps over the lazy dog.</div> <div class="has-size-7">The quick brown fox jumps over the lazy dog.</div> <div class="has-size-8">The quick brown fox jumps over the lazy dog.</div> <div class="has-size-9">The quick brown fox jumps over the lazy dog.</div>
Use the following classes to customize the font-weight property of any element:
| Class | Property |
|---|---|
has-weight-light | font-weight: 300; |
has-weight-normal | font-weight: 400; |
has-weight-medium | font-weight: 500; |
has-weight-bold | font-weight: 700; |
has-weight-black | font-weight: 900; |
Example:
<div class="has-weight-normal">Text using has-weight-normal</div> <div class="has-weight-bold">Test using has-weight-bold</div>
Use the following classes to control the line height of your text:
| Class | Property |
|---|---|
has-lh-none | line-height: 1; |
has-lh-tight | line-height: 1.25; |
has-lh-normal | line-height: 1.5; |
has-lh-loose | line-height: 2; |
Use has-lh-none, has-lh-tight, has-lh-normal, and has-lh-loose to apply a relative line-height to a text block based on its text size.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<div class="has-test-gray-500 has-weight-bold has-mb-2">has-lh-none</div> <p class="has-lh-none"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> <div class="has-test-gray-500 has-weight-bold has-mb-2">has-lh-tight</div> <p class="has-lh-tight"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> <div class="has-test-gray-500 has-weight-bold has-mb-2">has-lh-normal</div> <p class="has-lh-normal"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> <div class="has-test-gray-500 has-weight-bold has-mb-2">has-lh-loose</div> <p class="has-lh-loose"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
Use one of the following classes to set the horizontal align of your text inside the container element:
| Class | Property |
|---|---|
has-text-justified | text-align: justify; |
has-text-center | text-align: center; |
has-text-left | text-align: left; |
has-text-right | text-align: right; |
Use the has-text-justified helper to justify the inline contents:
<div class="has-text-justified"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
Use the has-text-left helper to align inline contents to the left:
<div class="has-text-left">Left aligned text</div>
Use the has-text-center helper to center inline contents:
<div class="has-text-center">Centered text</div>
Use the has-text-right helper to align inline contents to the right:
<div class="has-text-right">Right aligned text</div>
Use the following helpers to apply some transforms to your text:
| Class | Property |
|---|---|
is-italic | font-style: italic; |
is-underlined | text-decoration: underline; |
is-not-underlined | text-decoration: none; |
is-uppercase | text-transform: uppercase; |
is-lowercase | text-transform: lowercase; |
is-capitalized | text-transform: capitalize; |
Use the is-underlined to underline the text:
<strong class="is-underlined"> Lorem ipsum dolor sit amet, consectetur adipiscing elit... </strong>
Use is-italic to display text in italic style:
<strong class="is-italic"> Lorem ipsum dolor sit amet, consectetur adipiscing elit... </strong>
Use the is-uppercase helper to convert all characters of your text to uppercase:
<strong class="is-uppercase"> Lorem ipsum dolor sit amet, consectetur adipiscing elit... </strong>
Use the is-lowercase helper to convert all characters of your text to lowercase:
<strong class="is-lowercase"> Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit... </strong>
Use the is-capitalized helper to convert the first character of each word of your text to uppercase:
<strong class="is-capitalized"> Lorem ipsum dolor sit amet, consectetur adipiscing elit... </strong>
Use is-unselectable to prevent selecting text of the element:
<span class="is-unselectable has-text-center"> You can not select this text. </span>
Use the following helpers to control the vertical alignment of a inline block.
| Class | Property |
|---|---|
has-align-top | vertical-align: top; |
has-align-middle | vertical-align: middle; |
has-align-bottom | vertical-align: bottom; |
Example:
<div class="is-inline-block has-align-bottom">...</div>
Designed and maintained with by @jmjuanes.
Code is licensed under MIT, documentation under Creative Commons Attribution 4.0.