Use different heading elements or bootstrap classes to change the size and weight of the text.

Detailed documentation and more examples of text usage you can find in our Bootstrap Typography Docs.


Headings

All HTML headings, <h1> through <h6>, are available.

Heading Example

<h1></h1>

h1. Bootstrap heading

<h2></h2>

h2. Bootstrap heading

<h3></h3>

h3. Bootstrap heading

<h4></h4>

h4. Bootstrap heading

<h5></h5>

h5. Bootstrap heading

<h6></h6>

h6. Bootstrap heading

Heading classes

.h1 through .h6 classes are also available, 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


Customizing headings

Fancy display heading With faded secondary text


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.

Display 1


Display 2


Display 3


Display 4