Bootstrap 3 Typography
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> element and all paragraphs (<p>).
- In addition, all <p> elements have a bottom margin that equals half their computed line-height (10px by default).
Headings
All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.
-
h1 Bootstrap heading Semibold (36px)
-
h2 Bootstrap heading Semibold (30px)
-
h3 Bootstrap heading Semibold (24px)
-
h4 Bootstrap heading Semibold (18px)
-
h5 Bootstrap heading Semibold (14px)
-
h6 Bootstrap heading Semibold (12px)
<h1>h1 Bootstrap heading</h1> <h2>h2 Bootstrap heading</h2> <h3>h3 Bootstrap heading</h3> <h4>h4 Bootstrap heading</h4> <h5>h5 Bootstrap heading</h5> <h6>h6 Bootstrap heading</h6>
Create lighter, secondary text in any heading with a generic <small> tag or the .small class.
-
h1 Bootstrap heading Secondary text
-
h2 Bootstrap heading Secondary text
-
h3 Bootstrap heading Secondary text
-
h4 Bootstrap heading Secondary text
-
h5 Bootstrap heading Secondary text
-
h6 Bootstrap heading Secondary text
<h1>h1 Bootstrap heading <small>Secondary text</small></h1> <h2>h2 Bootstrap heading <small>Secondary text</small></h2> <h3>h3 Bootstrap heading <small>Secondary text</small></h3> <h4>h4 Bootstrap heading <small>Secondary text</small></h4> <h5>h5 Bootstrap heading <small>Secondary text</small></h5> <h6>h6 Bootstrap heading <small>Secondary text</small></h6>
Inline text elements
Marked text
For highlighting a run of text due to its relevance in another context, use the <mark>
tag.
You can use the mark tag to <mark>highlight</mark> text.
Deleted text
For indicating blocks of text that have been deleted use the <del>
tag.
<del>This line of text is meant to be treated as deleted text.</del>
Strikethrough text
For indicating blocks of text that are no longer relevant use the <s>
tag.
<s>This line of text is meant to be treated as no longer accurate.</s>
Inserted text
For indicating additions to the document use the <ins>
tag.
<ins>This line of text is meant to be treated as an addition to the document.</ins>
Underlined text
To underline text use the <u> tag.
<u>This line of text will render as underlined</u>
Small text
For de-emphasizing inline or blocks of text, use the <small>
tag to set text at 85% the size of the parent. Heading elements receive their own font-size
for nested <small>
elements.
You may alternatively use an inline element with .small
in place of any <small>
.
<small>This line of text is meant to be treated as fine print.</small>
Bold text
For emphasizing a snippet of text with a heavier font-weight.
<strong>rendered as bold text</strong>
Italics
For emphasizing a snippet of text with italics.
<em>rendered as italicized text</em>
Alignment classes
Easily realign text to components with text alignment classes.
<div class="text-left">Left aligned text.</div> <div class="text-center">Center aligned text.</div> <div class="text-right">Right aligned text.</div> <div class="text-justify">Justified text.</div> <div class="text-nowrap">No wrap text.</div>
Transformation classes
Transform text in components with text capitalization classes.
<div class="text-lowercase">Lowercased text.</div> <div class="text-uppercase">Uppercased text.</div> <div class="text-capitalize">Capitalized text.</div>
Abbreviations
Stylized implementation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover and to users of assistive technologies.
<abbr title="attribute">attr</abbr>
Addresses
Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <br>
.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Full Name
first.last@example.com
<address> <strong>Twitter, Inc.</strong><br> 1355 Market Street, Suite 900<br> San Francisco, CA 94103<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a> </address>
Blockquotes
For quoting blocks of content from another source within your document.
Default blockquote
Wrap <blockquote>
around any HTML as the quote. For straight quotes, we recommend a <p>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote>
Blockquote options
Style and content changes for simple variations on a standard <blockquote>.
Naming a source
Add a <footer> for identifying the source. Wrap the name of the source work in <cite>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote>
Alternate displays
Add .blockquote-reverse for a blockquote with right-aligned content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote>