BootstrapHow-ToBeginner · 3 min read

How to Use Font Weight in Bootstrap: Simple Guide

In Bootstrap, you use font weight utility classes like fw-bold for bold text, fw-normal for normal weight, and fw-light for lighter text. Simply add these classes to your HTML elements to change their font weight easily.

📐

Syntax

Bootstrap provides simple classes to control font weight:

fw-bold: Makes text bold.
fw-normal: Sets text to normal weight.
fw-light: Makes text lighter than normal.

Apply these classes directly to any text element like <p>, <span>, or <h1>.

html

<p class="fw-bold">This text is bold.</p>
<p class="fw-normal">This text is normal weight.</p>
<p class="fw-light">This text is light weight.</p>

Output

This text is bold. This text is normal weight. This text is light weight.

💻

Example

This example shows how to use Bootstrap font weight classes on different text elements.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Font Weight Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
  <h1 class="fw-bold">Bold Heading</h1>
  <p class="fw-normal">This paragraph has normal font weight.</p>
  <span class="fw-light">This span has light font weight.</span>
</body>
</html>

Output

A page with a bold heading, a normal weight paragraph, and a light weight span.

⚠️

Common Pitfalls

Common mistakes when using Bootstrap font weight classes include:

Forgetting to include Bootstrap CSS, so classes have no effect.
Using incorrect class names like font-weight-bold which is from older Bootstrap versions.
Applying font weight classes to elements overridden by other CSS styles.

Always use the correct fw-* classes and ensure Bootstrap CSS is loaded.

html

<!-- Wrong: old class name -->
<p class="font-weight-bold">This will not be bold in Bootstrap 5.</p>

<!-- Right: new class name -->
<p class="fw-bold">This will be bold.</p>

Output

The first paragraph is normal weight, the second is bold.

📊

Quick Reference

Class	Effect
fw-bold	Makes text bold
fw-normal	Sets text to normal weight
fw-light	Makes text lighter than normal

✅

Key Takeaways

Use fw-bold, fw-normal, and fw-light classes to control font weight in Bootstrap.

Always include Bootstrap CSS to ensure font weight classes work.

Avoid old class names like font-weight-bold from previous Bootstrap versions.

Apply font weight classes directly to text elements for quick styling.