Bootstrap Default Settings For Text Sizes

You must understand Bootstrap’s default setting for text sizes. In the bootstrap library the default text size settings are as follows.

• Default text size is 14px
• Line Height is 1.428
• H1 36 px
• H2 30px
• H3 24px
• H4 18px
• H5 14px
• H6 12px

<div class="container">
 <h1>h1 Bootstrap heading (36px)
 <h2>h2 Bootstrap heading (30px)
 <h3>h3 Bootstrap heading (24px)
 <h4>h4 Bootstrap heading (18px)
 <h5>h5 Bootstrap heading (14px)
 <h6>h6 Bootstrap heading (12px)
</div>

Try it yourself Here

Using The Small Tag Attribute For Lighter Text Color

For the heading tags you can also use the small element. It looks like this. It will lighten the color of the text that is in the tag.

<small>tags here</small>

Here is a code that you can use as a guide.

<div class="container">
 <p>The small element is used for lighter color second text in headings</p> 
 <h1>h1 heading <small>second lighter text</small></h1>
 <h2>h2 heading <small>second lighter text</small></h2>
 <h3>h3 heading <small>second lighter text</small></h3>
 <h4>h4 heading <small>second lighter text</small></h4>
 <h5>h5 heading <small>second lighter text</small></h5>
 <h6>h6 heading <small>secondary text</small></h6>
</div>

Try It Yourself here

This would be helpful if you want to emphasize a heading tag in Bootstrap. Tastefully done it can really enhance your headings.

Overriding The Bootstrap Settings

You can override your bootstrap settings by creating your own stylesheet. Make sure that you call in your library below the bootstrap library for it to override these settings. Here is an example of that.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"><link rel="stylesheet" href="YourCustomStylesheet.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Call in your CSS stylesheet after the Bootstrap CSS library but before the jquery javascript library.

You can also use a style tag on a page in order to override the settings as well.

<style>h1{font-size:22px;}</style>