Headings

These are the basics to keep in mind while developing custom components or interfaces.

General Headings

Bootstrap 4 offers 6 general Heading. CSS is automatically applied to html element or also following classes are available for styling body text: .h1, .h2, .h3, .h4, .h5, .h6.

Example with HTML tags:

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading
Example with classes:

h1 h2 h3 h4 h5 h6


<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>
<!-- OR -->
<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

A four classes for extra large headings are: .display-1, .display-2, .display-3, .display-4.

Display 1

Display 2

Display 3

Display 4


<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>

Secondary text

For secondary text in headings use HTML tag <small> or class .small

h1. Bootstrap heading Secondary text Secondary text with class

h2. Bootstrap heading Secondary text Secondary text with class

h3. Bootstrap heading Secondary text Secondary text with class

h4. Bootstrap heading Secondary text Secondary text with class

h5. Bootstrap heading Secondary text Secondary text with class
h6. Bootstrap heading Secondary text Secondary text with class

Display 1 Secondary text Secondary text with class

Display 2 Secondary text Secondary text with class

Display 3 Secondary text Secondary text with class

Display 4 Secondary text Secondary text with class


<h1>h1. Bootstrap heading <small class="text-muted">Secondary text</small></h1>
<h2>h2. Bootstrap heading <small class="text-muted">Secondary text</small></h2>
<h3>h3. Bootstrap heading <small class="text-muted">Secondary text</small></h3>
<h4>h4. Bootstrap heading <small class="text-muted">Secondary text</small></h4>
<h5>h5. Bootstrap heading <small class="text-muted">Secondary text</small></h5>
<h6>h6. Bootstrap heading <small class="text-muted">Secondary text</small></h6>
<h1 class="display-1">Display 1 <small class="text-muted">Secondary text</small></h1>
<h1 class="display-2">Display 2 <small class="text-muted">Secondary text</small></h1>
<h1 class="display-3">Display 3 <small class="text-muted">Secondary text</small></h1>
<h1 class="display-4">Display 4 <small class="text-muted">Secondary text</small></h1>