Font weight
Utilities for controlling font weight including bold, semibold, medium, normal, and light weights.
| Class | Styles |
|---|---|
| .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; |
Font weight
Quickly change the font-weight of text with these utilities. font-weight utilities are abbreviated as .fw-*.
Bold text.
Bolder weight text (relative to the parent element).
Semibold weight text.
Medium weight text.
Normal weight text.
Light weight text.
Lighter weight text (relative to the parent element).
<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-semibold">Semibold weight text.</p>
<p class="fw-medium">Medium weight text.</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>CSS
Sass map
Font weights are defined in the $font-weights map in scss/_config.scss. CSS custom properties (--font-weight-*) are generated from this map in scss/_root.scss, and the same map powers the Sass utilities API below.
$font-weights: (
lighter: lighter,
light: 300,
normal: 400,
medium: 500,
semibold: 600,
bold: 700,
bolder: bolder
);
Sass utilities API
Font weight utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.
"font-weight": (
property: font-weight,
class: fw,
values: $font-weights
),