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