Bootstrap Typography
Bootstrap default font-size is 14px, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition, all <p> elements have a bottom margin 10px.
<div class="container"> <h1>h1 Bootstrap heading (36px)</h1> <h2>h2 Bootstrap heading (30px)</h2> <h3>h3 Bootstrap heading (24px)</h3> <h4>h4 Bootstrap heading (18px)</h4> <h5>h5 Bootstrap heading (14px)</h5> <h6>h6 Bootstrap heading (12px)</h6> </div>
Bootstrap style the HTML headings in the following way:
<Small>
The small element is used to create a lighter, secondary text in any heading.
<div class="container"> <h1>h1 heading <small> secondary text</small></h1> <h2>h2 heading <small> secondary text</small></h2> <h3>h3 heading <small> secondary text</small></h3> <h4>h4 heading <small> secondary text</small></h4> <h5>h5 heading <small> secondary text</small></h5> <h6>h6 heading <small> secondary text</small></h6> </div>
<abbr>
The abbr element is used to mark up an abbreviation or acronym. Bootstrap will style the HTML <abbr> element in the following way:
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<blockquote>
Bootstrap will style the HTML <blockquote> element in the following way:
<blockquote>
<p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization,
WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million
globally.</p>
<footer>From WWF's website</footer>
</blockquote>
To show the quote on the right, use the ".blockquote-reverse" class
Text Colors and Backgrounds
The classes for text colors are: .text-muted, .text-primary, .text-success, .text-info, .text-warning, and .text-danger
<div class="container"> <p class="text-muted">This text is muted.</p> <p class="text-primary">This text is important.</p> <p class="text-success">This text indicates success.</p> <p class="text-info">This text represents some information.</p> <p class="text-warning">This text represents a warning.</p> <p class="text-danger">This text represents danger.</p> </div>
The classes for background colors are: .bg-primary, .bg-success, bg-info, bg-warning, and .bg-danger
<div class="container"> <p class="bg-primary">This text is important.</p> <p class="bg-success">This text indicates success.</p> <p class="bg-info">This text represents some information.</p> <p class="bg-warning">This text represents a warning.</p> <p class="bg-danger">This text represents danger.</p> </div>
| Class | Description |
|---|---|
| .lead | Makes a paragraph stand out |
| .small | Indicates smaller text (set to 85% of the size of the parent) |
| .text-left | Indicates left-aligned text |
| .text-center | Indicates center-aligned text |
| .text-right | Indicates right-aligned text |
| .text-justify | Indicates justified text |
| .text-nowrap | Indicates no wrap text |
| .text-lowercase | Indicates lowercased text |
| .text-uppercase | Indicates uppercased text |
| .text-capitalize | Indicates capitalized text |
| .list-unstyled | Removes the default list-style and left margin on list items (works on both <ul> and <ol>). |
| .list-inline | Places all list items on a single line |