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>
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.
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>
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>
You can also use a style tag on a page in order to override the settings as well.
Please like, share and subscribe.
I hope you enjoyed the article. If I was able to help you please consider a tip for the content.
One Time Tip