Quickly change the font-size of text. While our heading classes (e.g., .h1–.h6) apply font-size, font-weight, and line-height, these utilities only apply font-size. Sizing for these utilities matches HTML’s heading elements, so as the number increases, their size decreases.
Quick reference
| Class | Properties |
|---|---|
.lead | font-size: 1.25rem; font-weight: 300; |
.fs-1 | font-size: 2.5rem; /* 40px */ |
.fs-2 | font-size: 2rem; /* 32px */ |
.fs-3 | font-size: 1.75rem; /* 28px */ |
.fs-4 | font-size: 1.5rem; /* 24px */ |
.fs-5 | font-size: 1.25rem; /* 20px */ |
.fs-6 | font-size: 1rem; /* 16px */ |
.fs-sm | font-size: 0.875rem; /* 14px */ |
.fs-xs | font-size: 0.75rem; /* 12px */ |
.h1 | font-size: 2.5rem; font-weight: 500; line-height: 1.2; |
.h2 | font-size: 2rem; font-weight: 500; line-height: 1.2; |
.h3 | font-size: 1.75rem; font-weight: 500; line-height: 1.2; |
.h4 | font-size: 1.5rem; font-weight: 500; line-height: 1.2; |
.h5 | font-size: 1.25rem; font-weight: 500; line-height: 1.2; |
.h6 | font-size: 1rem; font-weight: 500; line-height: 1.2; |
.display-1 | font-size: 5rem; font-weight: 300; line-height: 1.2; |
.display-2 | font-size: 4.5rem; font-weight: 300; line-height: 1.2; |
.display-3 | font-size: 4rem; font-weight: 300; line-height: 1.2; |
.display-4 | font-size: 3.5rem; font-weight: 300; line-height: 1.2; |
.display-5 | font-size: 3rem; font-weight: 300; line-height: 1.2; |
.display-6 | font-size: 2.5rem; font-weight: 300; line-height: 1.2; |
Basic usage
Setting the font size
Control the font size of an element using the fs-{size} utilities.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<p class="fs-sm ...">The quick brown fox ...</p>
<p class="fs-6 ...">The quick brown fox ...</p>
<p class="fs-5 ...">The quick brown fox ...</p>
<p class="fs-4 ...">The quick brown fox ...</p>
<p class="fs-3 ...">The quick brown fox ...</p>
Lead
Make a paragraph stand out by adding .lead.
This is a lead paragraph. It stands out from regular paragraphs.
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>Headings
Use the <h1> ~ <h6>HTML tag or the .h1 ~ .h6 utilities to scale the font size, weight and line height of an element.
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>Use the .h1 ~ .h6 classes for when you want to match the font styling of a heading but cannot use the associated HTML element.
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>Display headings
Traditional heading elements are designed to work best in the meat of your page content.
When you need a heading to stand out, consider using a display heading — a larger, slightly more opinionated heading style using the display-{size} utilities.
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>Responsive font sizes
In Bootstrap 5, we’ve enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes. Have a look at the RFS page to find out how this works.