Font weight/style
Weight and style utilities make text bold, light or italic without any custom CSS.
In this page:
Syntax
<p class="fw-bold">bold</p>
<p class="fw-light">light</p>
<p class="fst-italic">italic</p>Font weight/style
Use .fw-bold, .fw-semibold, .fw-normal and .fw-light for weight and .fst-italic or .fst-normal for style. .text-decoration-none, .text-lowercase and .text-uppercase adjust decoration and case. The .font-monospace class switches to a monospace font.
Note:
fw-bolder and fw-lighter change weight relative to the parent.
Example: Font weight/style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container">
<p class="fw-bold">Bold text</p>
<p class="fw-semibold">Semibold text</p>
<p class="fw-light">Light text</p>
<p class="fst-italic">Italic text</p>
<p class="text-uppercase fw-bold">uppercase and bold</p>
<p class="font-monospace">Monospace text</p>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Using b and i tags for styling only
- Overriding with inline CSS
- Forgetting fst-italic is for style
Chapter Summary
- fw-bold, fw-semibold, fw-normal, fw-light
- fst-italic and fst-normal
- Case and decoration utilities
- font-monospace
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: