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

Bootstrap Default Settings For Text Sizes

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>
Please follow and like us:
Bootstrap Default Settings For Text Sizes was last modified: January 9th, 2016 by Maximus Mccullough

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.