Bootstrap CSS Typography Reference

❮ Previous Next ❯

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 Try it
<small> Creates a lighter, secondary text in any heading

Heading (secondary text)

 Try it
.small Indicates smaller text (set to 85% of the size of the parent): Smaller text Try it
.lead Makes a text stand out: Stand out text Try it
<mark>
or
.mark		 Highlights text: Highlighted text Try it
<del> Indicates deleted text: Deleted text Try it
<s> Indicates no longer relevant text: No longer relevant text Try it
<ins> Indicates inserted text: Inserted text Try it
<u> Indicates underlined text: Underlined text Try it
<strong> Indicates bold text: Bold text Try it
<em> Indicates italic text: Italic text Try it
.text-left Indicates left-aligned text Try it
.text-center Indicates center-aligned text Try it
.text-right Indicates right-aligned text Try it
.text-justify Indicates justified text Try it
.text-nowrap Indicates no wrap text Try it
.text-lowercase Indicates lowercased text: LOWERCASED TEXT Try it
.text-uppercase Indicates uppercased text: uppercased text Try it
.text-capitalize Indicates capitalized text: capitalized text Try it
<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. Try it
.initialism Displays the text inside the <abbr> element in a slightly smaller font size Try it
<address> Presents contact information Try it
<blockquote> Indicates blocks of content from another source Try it
.blockquote-reverse Indicates a blockquote with right-aligned content Try it
<ul> Indicates an unordered list Try it
<ol> Indicates an ordered list Try it
.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) Try it
.list-inline Places all list items on a single line Try it
<dl> Indicates a description list Try it
.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 Try it

Code

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

❮ Previous Next ❯
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.