1 Star2 Stars3 Stars4 Stars5 Stars (5 votes, average: 5.00 out of 5)

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.

Subscribe To My YouTube Channel:
<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>
Bootstrap Default Settings For Text Sizes was last modified: January 9th, 2016 by Maximus Mccullough

Advanced Programming Made Easy

I hope you enjoyed the article. If I was able to help you please consider a tip for the content.

One Time Tip

more tips

Reoccuring Tips

Tips

Bootstrap Default Settings For Text Sizes

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.