BootstrapHow-ToBeginner · 3 min read

How to Use Font Size in Bootstrap: Simple Guide

In Bootstrap, you can change font size using predefined utility classes like fs-1 to fs-6, where fs-1 is the largest and fs-6 the smallest. Just add these classes to your HTML elements to quickly adjust text size without custom CSS.

📐

Syntax

Bootstrap uses font size utility classes named fs-1 through fs-6. The number indicates the size, with fs-1 being the largest and fs-6 the smallest font size. You apply these classes directly to any text element.

html

<p class="fs-1">Largest font size (fs-1)</p>
<p class="fs-3">Medium font size (fs-3)</p>
<p class="fs-6">Smallest font size (fs-6)</p>

Output

Three paragraphs with descending font sizes from large to small

💻

Example

This example shows how to use Bootstrap font size classes on different text elements to quickly change their size.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Font Size 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="fs-1">Heading with fs-1 (largest)</h1>
  <p class="fs-3">Paragraph with fs-3 (medium size)</p>
  <small class="fs-6">Small text with fs-6 (smallest)</small>
</body>
</html>

Output

A page showing a large heading, a medium paragraph, and small text, each sized by Bootstrap classes

⚠️

Common Pitfalls

Not including Bootstrap CSS will make the fs-* classes have no effect.
Using numbers outside 1-6 like fs-0 or fs-7 won't work because Bootstrap defines only six sizes.
Overriding font size with custom CSS can conflict with Bootstrap classes.

html

<!-- Wrong: No Bootstrap CSS linked, classes won't work -->
<p class="fs-2">This text won't change size without Bootstrap CSS.</p>

<!-- Right: Include Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

📊

Quick Reference

Class	Font Size Description
fs-1	Largest font size
fs-2	Second largest
fs-3	Medium size
fs-4	Slightly smaller
fs-5	Small size
fs-6	Smallest font size

✅

Key Takeaways

Use Bootstrap font size classes fs-1 to fs-6 to quickly adjust text size.

Always include Bootstrap CSS for these classes to work.

Do not use numbers outside 1-6 with fs- classes.

These classes apply directly to any HTML text element.

Avoid conflicting custom CSS that overrides Bootstrap font sizes.