Hey everybody I want to let you know that I have undertaken the grueling task of getting the heck away from WordPress. I was so sick of the problems and updates I had to do all the time. I am now using my ezbloo system and I am integrating all my old posts into the new system. It sucks, but in the end, I will save bundles of time. I needed to keep things simple and that is why I created ezbloo. I'll have more on this later for you guys after I am done with the total integration of my old posts here. So if you are looking for a post and need it faster, shoot me an email and I will make it a priority. [email protected]

Bootstrap Default Settings For Text Sizes Edit
Last Update:2024-10-17 14:58:43
The Change:2024-10-16 10:33:26
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>