Text
Classes
| Class | Properties |
|---|---|
| .text-{left|center|right|justify} | text-algin: {left|center|right|justify}; |
| .uppercase | text-transform: uppercase; |
| .lowercase | text-transform: lowercase; |
| .capitalize | text-transform: capitalize; |
| .normal-case | text-transform: none; |
| .line-h-{1-length($lineHeights)} | line-height: {$lineHeights[i]}; |
| .spacing-{1-length($letterSpacers)} | letter-spacing: {$letterSpacers[i]}; |
| .underline | text-decoration: underline; |
| .overline | text-decoration: overline; |
| .line-through | text-decoration: line-through; |
| .no-line | text-decoration: no-line; |
Variables
| Variable | Default Value |
|---|---|
| $lineHeights | 1, 1.25, 1.375, 1.5, 1.625, 2 |
| $letterSpacers | -0.05em, -0.025em, 0, 0.025em, 0.05em, 0.1em |
Text Align
xxxxxxxxxx1
<div class="text-left mb-4">Somewhere, something incredible is waiting to be known inconspicuous motes of rock and gas kindling the energy hidden in matter worldlets the carbon in our apple pies network of wormholes.</div>2
<div class="text-center mb-4">Somewhere, something incredible is waiting to be known inconspicuous motes of rock and gas kindling the energy hidden in matter worldlets the carbon in our apple pies network of wormholes.</div>3
<div class="text-right mb-4">Somewhere, something incredible is waiting to be known inconspicuous motes of rock and gas kindling the energy hidden in matter worldlets the carbon in our apple pies network of wormholes.</div>4
<div class="text-justify">Somewhere, something incredible is waiting to be known inconspicuous motes of rock and gas kindling the energy hidden in matter worldlets the carbon in our apple pies network of wormholes.</div>Somewhere, something incredible is waiting to be known inconspicuous motes of rock and gas kindling the energy hidden in matter worldlets the carbon in our apple pies network of wormholes.
Somewhere, something incredible is waiting to be known inconspicuous motes of rock and gas kindling the energy hidden in matter worldlets the carbon in our apple pies network of wormholes.
Somewhere, something incredible is waiting to be known inconspicuous motes of rock and gas kindling the energy hidden in matter worldlets the carbon in our apple pies network of wormholes.
Somewhere, something incredible is waiting to be known inconspicuous motes of rock and gas kindling the energy hidden in matter worldlets the carbon in our apple pies network of wormholes.
Text Transform
xxxxxxxxxx1
<div class="uppercase mb-4">Somewhere, something incredible is waiting to be known.</div>2
<div class="lowercase mb-4">Somewhere, something incredible is waiting to be known.</div>3
<div class="capitalize mb-4">Somewhere, something incredible is waiting to be known.</div>4
<div class="normal-case">Somewhere, something incredible is waiting to be known.</div>Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Text Decoration
xxxxxxxxxx1
<div class="underline mb-4">Somewhere, something incredible is waiting to be known.</div>2
<div class="overline mb-4">Somewhere, something incredible is waiting to be known.</div>3
<div class="line-through mb-4">Somewhere, something incredible is waiting to be known.</div>4
<div class="no-line">Somewhere, something incredible is waiting to be known.</div>Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Line Height
xxxxxxxxxx1
<div class="line-h-1 mb-4">Somewhere, something incredible is waiting to be known inconspicuous motes of rock and gas kindling the energy hidden in matter worldlets the carbon in our apple pies network of wormholes.</div>2
<div class="line-h-2 mb-4">Somewhere, something incredible is waiting to be known inconspicuous motes of rock and gas kindling the energy hidden in matter worldlets the carbon in our apple pies network of wormholes.</div>3
<div class="line-h-3 mb-4">Somewhere, something incredible is waiting to be known inconspicuous motes of rock and gas kindling the energy hidden in matter worldlets the carbon in our apple pies network of wormholes.</div>4
<div class="line-h-4 mb-4">Somewhere, something incredible is waiting to be known inconspicuous motes of rock and gas kindling the energy hidden in matter worldlets the carbon in our apple pies network of wormholes.</div>5
<div class="line-h-5 mb-4">Somewhere, something incredible is waiting to be known inconspicuous motes of rock and gas kindling the energy hidden in matter worldlets the carbon in our apple pies network of wormholes.</div>6
<div class="line-h-6 mb-4">Somewhere, something incredible is waiting to be known inconspicuous motes of rock and gas kindling the energy hidden in matter worldlets the carbon in our apple pies network of wormholes.</div>Somewhere, something incredible is waiting to be known inconspicuous motes of rock and gas kindling the energy hidden in matter worldlets the carbon in our apple pies network of wormholes.
Somewhere, something incredible is waiting to be known inconspicuous motes of rock and gas kindling the energy hidden in matter worldlets the carbon in our apple pies network of wormholes.
Somewhere, something incredible is waiting to be known inconspicuous motes of rock and gas kindling the energy hidden in matter worldlets the carbon in our apple pies network of wormholes.
Somewhere, something incredible is waiting to be known inconspicuous motes of rock and gas kindling the energy hidden in matter worldlets the carbon in our apple pies network of wormholes.
Somewhere, something incredible is waiting to be known inconspicuous motes of rock and gas kindling the energy hidden in matter worldlets the carbon in our apple pies network of wormholes.
Somewhere, something incredible is waiting to be known inconspicuous motes of rock and gas kindling the energy hidden in matter worldlets the carbon in our apple pies network of wormholes.
Letter Spacing
xxxxxxxxxx1
<div class="spacing-1 mb-4">Somewhere, something incredible is waiting to be known.</div>2
<div class="spacing-2 mb-4">Somewhere, something incredible is waiting to be known.</div>3
<div class="spacing-3 mb-4">Somewhere, something incredible is waiting to be known.</div>4
<div class="spacing-4 mb-4">Somewhere, something incredible is waiting to be known.</div>5
<div class="spacing-5 mb-4">Somewhere, something incredible is waiting to be known.</div>6
<div class="spacing-6 mb-4">Somewhere, something incredible is waiting to be known.</div>Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.