Font weight
Utilities for controlling font weight including bold, semibold, medium, normal, and light weights.
On this page
| 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 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: (
lighter: $font-weight-lighter,
light: $font-weight-light,
normal: $font-weight-normal,
medium: $font-weight-medium,
semibold: $font-weight-semibold,
bold: $font-weight-bold,
bolder: $font-weight-bolder
)
),