Contents
Quickly change the font-weight of text with the font weight utilities.
Quick reference
| Class | Properties |
|---|---|
.fw-thin | font-weight: 100; |
.fw-extralight | font-weight: 200; |
.fw-lighter | font-weight: lighter; |
.fw-light | font-weight: 300; |
.fw-normal | font-weight: 400; |
.fw-medium | font-weight: 500; |
.fw-semibold | font-weight: 600; |
.fw-bold | font-weight: 700; |
.fw-bolder | font-weight: bolder; |
.fw-black | font-weight: 900; |
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-normal
The quick brown fox jumps over the lazy dog.
fw-medium
The quick brown fox jumps over the lazy dog.
fw-semibold
The quick brown fox jumps over the lazy dog.
fw-bold
The quick brown fox jumps over the lazy dog.
fw-bolder
The 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>
Edit this page on Github
Last updated on April 6, 2024