BS Typography
Bootstrap's Default Settings
Bootstrap’s global default font size is 14px with a line height of 1.428.
This applies to the <body> element and all paragraphs (<p>).
In addition, all <p> elements have a bottom margin equal to half their computed line-height (10px default).
Bootstrap vs. Browser Defaults
In this chapter, we’ll look at certain HTML elements that Bootstrap styles differently than browser defaults.
-
By default, Bootstrap styles HTML headings (<h1> to <h6>) in the following way:
Example
h1 Bootstrap heading (36px)
h2 Bootstrap heading (30px)
h3 Bootstrap heading (24px)
h4 Bootstrap heading (18px)
h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)
In Bootstrap, the HTML <small> element creates a lighter, secondary text in any heading.
Example
h1 heading secondary text
h2 heading secondary text
h3 heading secondary text
h4 heading secondary text
h5 heading secondary text
h6 heading secondary text
Bootstrap styles the HTML <mark> element in the following way:
Example
Use the mark element to highlight text.
Bootstrap styles the HTML <abbr> element as follows:
Example
The WHO was founded in 1948.
Bootstrap styles the HTML <blockquote> element in the following way:
Example
To display the quote on the right, use the .blockquote-reverse class:
Example
Bootstrap styles the HTML <dl> element in the following way:
Example
Coffee
– black hot drink
Milk
– white cold drink
Bootstrap styles the HTML <code> element in the following way:
Example
The following HTML elements: span, section, and div defines a section in a document.
Bootstrap styles the HTML <kbd> element in the following way:
Example
Bootstrap styles the HTML <pre> element in the following way:
Example
Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks.
Contextual Colors and Backgrounds
Bootstrap also includes certain contextual classes that can be used to convey “meaning through colors”.
The classes for text colors are: .text-muted, .text-primary, .text-success, .text-info, .text-warning, and .text-danger:
Example
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
The classes for background colors are: .bg-primary, .bg-success, .bg-info, .bg-warning, and .bg-danger:
Example
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
More Typography Classes
The Bootstrap classes listed below can be used to style HTML elements further:
| 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 | |
.initialism |
Displays the text inside an <abbr> element in a slightly smaller font size |
|
.list-unstyled |
Removes the default list-style and left margin on list items (works on both <ul> and <ol>). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well) |
|
.list-inline |
Places all list items on a single line | |
.dl-horizontal |
Lines up the terms (<dt>) and descriptions (<dd>) in
<dl> elements side-by-side. Starts off like default <dl>s, but when the browser window expands, it will line up side-by-side |
|
.pre-scrollable |
Makes a <pre> element scrollable |
Complete Bootstrap Typography Reference
Visit our Bootstrap typographic Reference for a comprehensive list of all typographic elements and classes.
Look at our Bootstrap Helper Classes Reference for additional information on contextual classes.
