Typography is another concept in Bootstrap that helps in styling and formatting text content. By default, Bootstrap 4 uses 1rem (16px) as the font size for the body and the line height remains 1.5. It keeps its default font family as a native font stack. In addition, <p> (paragraph) elements have margin-top set to 0 and margin-bottom set to 1rem (16px).
Default Font Sizes in Bootstrap 4
In Bootstrap 4, the typography font size is based on a rem unit of measurement relative to the root HTML element. The following table describes the font size in pixels compared to the rem.
| Selector | Font Size in REM | Font Size in Pixel | Example |
|---|---|---|---|
<h1>, .h1
| 2.5rem | 40px | Heading 1 |
<h2>, .h2
| 2rem | 32px | Heading 2 |
<h3>, .h3
| 1.75rem | 28px | Heading 3 |
<h4>, .h4
| 1.5rem | 24px | Heading 4 |
<h5>, .h5
| 1.25rem | 20px | Heading 5 |
<h6>, .h6
| 1rem | 16px | Heading 6 |
.display-1
| 6rem | 90px | Display 1 |
.display-2
| 5.5rem | 82.5px | Display 2 |
.display-3
| 4.5rem | 67.5px | Display 3 |
.display-4
| 3.5rem | 52.5px | Display 4 |
<p>
| 1rem | 16px | Paragraph text |
In the "Rem" unit, changing the root font size will affect the size of all elements on the page defined using the "Rem" unit.
Where Bootstrap's Typography Can Be Applied?
Typography can be applied for creating customized:
- Headings and Subheadings.
- Text and Paragraph's font color, font face, and alignment.
- Ordered and Unordered listings.
- Forms.
- Buttons.
- Any other display texts.
Headings in Bootstrap 4
HTML has default heading tags, and Bootstrap applies styles to it. Headings are bolder and have an increased font size in Bootstrap 4 compared to default HTML headings.
Example:
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>The .h1 to .h6 classes are also available when it is necessary to match the font style of a heading, but you do not want to use the corresponding HTML element.
Example:
<h1 class="h2">Heading 1 text in the size of Heading 2</h1>
<!-- or -->
<p class="h1">Some texts that need to be displayed in heading 1 size.</p>
<p class="h2">Some texts that need to be displayed in heading 2 size.</p>
<p class="h3">Some texts that need to be displayed in heading 3 size.</p>
<p class="h4">Some texts that need to be displayed in heading 4 size.</p>
<p class="h5">Some texts that need to be displayed in heading 5 size.</p>
<p class="h6">Some texts that need to be displayed in heading 6 size.</p>Subheadings in Bootstrap 4
The inline subheading adds an additional heading, which acts as a subheading for the main <hN> heading (where 'N' is any number between 1 and 6). For this, you have to add the <small> tag as a nested tag within the head element to get the formatting of the subheading, which you can see in the example below:
Example:
<h1> Heading 1 <small>SubHeading 1</small> </h1>
<h2> Heading 2 <small>SubHeading 2</small> </h2>
<h3> Heading 3 <small>SubHeading 3</small> </h3>
<h4> Heading 4 <small>SubHeading 4</small> </h4>
<h5> Heading 5 <small>SubHeading 5</small> </h5>
<h6> Heading 6 <small>SubHeading 6</small> </h6>Display Headings in Bootstrap 4
Display headings differ from traditional headings elements; you can use them when you need to display a significant, slightly more opinionated title. There are four types of display heading classes available in Bootstrap 4.
Example:
<span class="display-1">Display Heading 1</span >
<span class="display-2">Display Heading 2</span >
<span class="display-3">Display Heading 3</span >
<span class="display-4">Display Heading 4</span >Output:
Lead in Bootstrap 4
Bootstrap 4 .lead class is used to add some emphasis to any paragraph content. It can be implemented something like this:
Example:
<p>This is a regular paragraph without using the lead class.</p>
<p class="lead">Example of Lead class with a paragraph showing its use to emphasize text.</p>Output:
This is a regular paragraph without using the lead class.
Example of Lead class with a paragraph showing its use to emphasize text.
Text Colors in Bootstrap 4
There are some reference classes available in Bootstrap 4 that are used to display texts in different colors.
| Class Name | Description |
|---|---|
| .text-primary | This class displays texts in blue color. |
| .text-secondary | This class displays texts in gray color. |
| .text-success | This class displays texts in green color. |
| .text-danger | Red is primarily avoided in most designs because it shows danger or anger. But you can use it according to your design needs. |
| .text-warning | This class displays texts in dark orange color. |
| .text-info | This class displays text in light blue (another shade of blue). |
| .text-light | This class displays text in light colors that are not white. |
| .text-dark | This class displays text in dark colors that are not black. |
| .text-muted | This class is for the information that is silent and represents obsolete data. |
| .text-white | This class displays text in white. |
Typography Classes in Bootstrap 4
Here is a list of some other typography classes in Bootstrap 4 which can be used in styling HTML elements.
| Class Name | Description |
|---|---|
.font-weight-bold
| For creating bold text. |
.font-weight-bolder
| For creating bolder text. |
.font-italic
| For creating italic text. |
.font-weight-light
| For creating lightweight text. |
.font-weight-lighter
| For creating more lightweight text. |
.font-weight-normal
| For creating normal text. |
.small
| To make a small text 85% smaller than the parent size. |
.text-break
| This class helps in preventing long text from breaking design and layout. |
.text-decoration-none
| For removing the underline from any hyperlink. |
.text-justify
| For creating justified text. |
.text-monospace
| For creating mono-spaced text. |
.text-nowrap
| For creating no wrap text. |
.text-lowercase
| For creating lowercase text. |
.text-reset
| For resetting the text color or a link. |
.text-uppercase
| For creating uppercased text. |
.text-capitalize
| For creating capitalized text. |