Font Weight
Utilities for controlling the font weight of an element.
Contents
Quickly change the font-weight of text with the font weight utilities.
Quick reference
| Class | Properties |
|---|---|
.fw-lighter | font-weight: lighter; |
.fw-light | font-weight: 300; |
.fw-normal | font-weight: 400; |
.fw-semibold | font-weight: 500; |
.fw-bold | font-weight: 600; |
.fw-bolder | font-weight: bolder; |
Basic usage
Setting the font weight
Control the font weight of an element using the fw-{weight} utilities.
fw-light
The quick brown fox jumps over the lazy dog.
fw-normalThe quick brown fox jumps over the lazy dog.
fw-semiboldThe quick brown fox jumps over the lazy dog.
fw-boldThe quick brown fox jumps over the lazy dog.
fw-bolderThe quick brown fox jumps over the lazy dog.
<p class="fw-light ...">The quick brown fox ...</p>
<p class="fw-normal ...">The quick brown fox ...</p>
<p class="fw-semibold ...">The quick brown fox ...</p>
<p class="fw-bold ...">The quick brown fox ...</p>
<p class="fw-bolder ...">The quick brown fox ...</p>