Bootstrap CSS Typography Reference

Bootstrap’s Default Settings

Bootstrap’s global 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 that equals half their computed line-height (10px by default).


Typography

The elements below are HTML elements that will be styled a little bit differently by Bootstrap than browser defaults. Look at the “Try it” examples to see the result/differences.

The classes below is used to style the elements further.

Element/Class Description Example
<h1> – <h6>
or
.h1 – .h6
h1 – h6 headings
<small> Creates a lighter, secondary text in any heading

Heading (secondary text)

.small Indicates smaller text (set to 85% of the size of the parent): Smaller text
.lead Makes a text stand out: Stand out text
<mark>
or
.mark
Highlights text: Highlighted text
<del> Indicates deleted text: Deleted text
<s> Indicates no longer relevant text: No longer relevant text
<ins> Indicates inserted text: Inserted text
<u> Indicates underlined text: Underlined text
<strong> Indicates bold text: Bold text
<em> Indicates italic text: Italic text
.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: lowercased text
.text-uppercase Indicates uppercased text: UPPERCASED TEXT
.text-capitalize Indicates capitalized text: Capitalized Text
<abbr> The <abbr> element indicates an abbreviation or acronym. Abbreviations with a title attribute have a dotted bottom border and a help cursor on hover, providing additional context on hover.
.initialism Displays the text inside the <abbr> element in a slightly smaller font size
<address> Presents contact information
<blockquote> Indicates blocks of content from another source
.blockquote-reverse Indicates a blockquote with right-aligned content
<ul> Indicates an unordered list
<ol> Indicates an ordered list
.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> Indicates a description list
.dl-horizontal Lines up the terms and descriptions in the <dl> element side-by-side. Starts off like default <dl>s, but when the browser window expands, it will line up side-by-side

Code

Element/Class Description Example
<var> Indicates variables: x = ab + y
<kbd> Indicates input that is typically entered via the keyboard: CTRL + P
<pre> Indicates multiple lines of code
<pre class=”pre-scrollable”> Indicates multiple lines of code with scrollbar
<samp> Indicates sample output from a computer program: Sample output
<code> Indicates inline snippets of code: span, div

Leave a Reply

Your email address will not be published. Required fields are marked *