Font Weight

Utilities for controlling the font weight of an element.

Quickly change the font-weight of text with the font weight utilities.

Quick reference

ClassProperties
.fw-lighterfont-weight: lighter;
.fw-lightfont-weight: 300;
.fw-normalfont-weight: 400;
.fw-mediumfont-weight: 500;
.fw-semiboldfont-weight: 600;
.fw-boldfont-weight: 700;
.fw-bolderfont-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-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>