<metaname="description"content="Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.">
<metaname="author"content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<metaname="twitter:description"content="Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.">
<metaproperty="og:description"content="Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.">
<p>Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the <ahref="/docs/4.1/utilities/text/">textual utility classes</a>.</p>
<ul>
<li>Use a <ahref="/docs/4.1/content/reboot/#native-font-stack">native font stack</a> that selects the best <codeclass="highlighter-rouge">font-family</code> for each OS and device.</li>
<li>For a more inclusive and accessible type scale, we assume the browser default root <codeclass="highlighter-rouge">font-size</code> (typically 16px) so visitors can customize their browser defaults as needed.</li>
<li>Use the <codeclass="highlighter-rouge">$font-family-base</code>, <codeclass="highlighter-rouge">$font-size-base</code>, and <codeclass="highlighter-rouge">$line-height-base</code> attributes as our typographic base applied to the <codeclass="highlighter-rouge"><body></code>.</li>
<li>Set the global link color via <codeclass="highlighter-rouge">$link-color</code> and apply link underlines only on <codeclass="highlighter-rouge">:hover</code>.</li>
<li>Use <codeclass="highlighter-rouge">$body-bg</code> to set a <codeclass="highlighter-rouge">background-color</code> on the <codeclass="highlighter-rouge"><body></code> (<codeclass="highlighter-rouge">#fff</code> by default).</li>
</ul>
<p>These styles can be found within <codeclass="highlighter-rouge">_reboot.scss</code>, and the global variables are defined in <codeclass="highlighter-rouge">_variables.scss</code>. Make sure to set <codeclass="highlighter-rouge">$font-size-base</code> in <codeclass="highlighter-rouge">rem</code>.</p>
<h2id="headings">Headings</h2>
<p>All HTML headings, <codeclass="highlighter-rouge"><h1></code> through <codeclass="highlighter-rouge"><h6></code>, are available.</p>
<p><codeclass="highlighter-rouge">.h1</code> through <codeclass="highlighter-rouge">.h6</code> classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.</p>
<p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p>
<h2id="inline-text-elements">Inline text elements</h2>
<p>Styling for common inline HTML5 elements.</p>
<divclass="bd-example">
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
</div>
<figureclass="highlight"><pre><codeclass="language-html"data-lang="html"><spanclass="nt"><p></span>You can use the mark tag to <spanclass="nt"><mark></span>highlight<spanclass="nt"></mark></span> text.<spanclass="nt"></p></span>
<spanclass="nt"><p><del></span>This line of text is meant to be treated as deleted text.<spanclass="nt"></del></p></span>
<spanclass="nt"><p><s></span>This line of text is meant to be treated as no longer accurate.<spanclass="nt"></s></p></span>
<spanclass="nt"><p><ins></span>This line of text is meant to be treated as an addition to the document.<spanclass="nt"></ins></p></span>
<spanclass="nt"><p><u></span>This line of text will render as underlined<spanclass="nt"></u></p></span>
<spanclass="nt"><p><small></span>This line of text is meant to be treated as fine print.<spanclass="nt"></small></p></span>
<spanclass="nt"><p><strong></span>This line rendered as bold text.<spanclass="nt"></strong></p></span>
<spanclass="nt"><p><em></span>This line rendered as italicized text.<spanclass="nt"></em></p></span></code></pre></figure>
<p><codeclass="highlighter-rouge">.mark</code> and <codeclass="highlighter-rouge">.small</code> classes are also available to apply the same styles as <codeclass="highlighter-rouge"><mark></code> and <codeclass="highlighter-rouge"><small></code> while avoiding any unwanted semantic implications that the tags would bring.</p>
<p>While not shown above, feel free to use <codeclass="highlighter-rouge"><b></code> and <codeclass="highlighter-rouge"><i></code> in HTML5. <codeclass="highlighter-rouge"><b></code> is meant to highlight words or phrases without conveying additional importance while <codeclass="highlighter-rouge"><i></code> is mostly for voice, technical terms, etc.</p>
<h2id="text-utilities">Text utilities</h2>
<p>Change text alignment, transform, style, weight, and color with our <ahref="/docs/4.1/utilities/text/">text utilities</a> and <ahref="/docs/4.1/utilities/colors/">color utilities</a>.</p>
<h2id="abbreviations">Abbreviations</h2>
<p>Stylized implementation of HTML’s <codeclass="highlighter-rouge"><abbr></code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.</p>
<p>Add <codeclass="highlighter-rouge">.initialism</code> to an abbreviation for a slightly smaller font-size.</p>
<p>For quoting blocks of content from another source within your document. Wrap <codeclass="highlighter-rouge"><blockquote class="blockquote"></code> around any <abbrtitle="HyperText Markup Language">HTML</abbr> as the quote.</p>
<divclass="bd-example">
<blockquoteclass="blockquote">
<pclass="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<spanclass="nt"><p</span><spanclass="na">class=</span><spanclass="s">"mb-0"</span><spanclass="nt">></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<spanclass="nt"></p></span>
<p>Add a <codeclass="highlighter-rouge"><footer class="blockquote-footer"></code> for identifying the source. Wrap the name of the source work in <codeclass="highlighter-rouge"><cite></code>.</p>
<divclass="bd-example">
<blockquoteclass="blockquote">
<pclass="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footerclass="blockquote-footer">Someone famous in <citetitle="Source Title">Source Title</cite></footer>
<spanclass="nt"><p</span><spanclass="na">class=</span><spanclass="s">"mb-0"</span><spanclass="nt">></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<spanclass="nt"></p></span>
<spanclass="nt"><footer</span><spanclass="na">class=</span><spanclass="s">"blockquote-footer"</span><spanclass="nt">></span>Someone famous in <spanclass="nt"><cite</span><spanclass="na">title=</span><spanclass="s">"Source Title"</span><spanclass="nt">></span>Source Title<spanclass="nt"></cite></footer></span>
<spanclass="nt"><p</span><spanclass="na">class=</span><spanclass="s">"mb-0"</span><spanclass="nt">></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<spanclass="nt"></p></span>
<spanclass="nt"><footer</span><spanclass="na">class=</span><spanclass="s">"blockquote-footer"</span><spanclass="nt">></span>Someone famous in <spanclass="nt"><cite</span><spanclass="na">title=</span><spanclass="s">"Source Title"</span><spanclass="nt">></span>Source Title<spanclass="nt"></cite></footer></span>
<spanclass="nt"><p</span><spanclass="na">class=</span><spanclass="s">"mb-0"</span><spanclass="nt">></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<spanclass="nt"></p></span>
<spanclass="nt"><footer</span><spanclass="na">class=</span><spanclass="s">"blockquote-footer"</span><spanclass="nt">></span>Someone famous in <spanclass="nt"><cite</span><spanclass="na">title=</span><spanclass="s">"Source Title"</span><spanclass="nt">></span>Source Title<spanclass="nt"></cite></footer></span>
<p>Remove the default <codeclass="highlighter-rouge">list-style</code> and left margin on list items (immediate children only). <strong>This only applies to immediate children list items</strong>, meaning you will need to add the class for any nested lists as well.</p>
<p>Remove a list’s bullets and apply some light <codeclass="highlighter-rouge">margin</code> with a combination of two classes, <codeclass="highlighter-rouge">.list-inline</code> and <codeclass="highlighter-rouge">.list-inline-item</code>.</p>
<h3id="description-list-alignment">Description list alignment</h3>
<p>Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a <codeclass="highlighter-rouge">.text-truncate</code> class to truncate the text with an ellipsis.</p>
<divclass="bd-example">
<dlclass="row">
<dtclass="col-sm-3">Description lists</dt>
<ddclass="col-sm-9">A description list is perfect for defining terms.</dd>
<dtclass="col-sm-3">Euismod</dt>
<ddclass="col-sm-9">
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>
<dtclass="col-sm-3">Malesuada porta</dt>
<ddclass="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dtclass="col-sm-3 text-truncate">Truncated term is truncated</dt>
<ddclass="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
<dtclass="col-sm-3">Nesting</dt>
<ddclass="col-sm-9">
<dlclass="row">
<dtclass="col-sm-4">Nested definition list</dt>
<ddclass="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
<spanclass="nt"><dd</span><spanclass="na">class=</span><spanclass="s">"col-sm-9"</span><spanclass="nt">></span>A description list is perfect for defining terms.<spanclass="nt"></dd></span>
<spanclass="nt"><dd</span><spanclass="na">class=</span><spanclass="s">"col-sm-9"</span><spanclass="nt">></span>Etiam porta sem malesuada magna mollis euismod.<spanclass="nt"></dd></span>
<spanclass="nt"><dt</span><spanclass="na">class=</span><spanclass="s">"col-sm-3 text-truncate"</span><spanclass="nt">></span>Truncated term is truncated<spanclass="nt"></dt></span>
<spanclass="nt"><dd</span><spanclass="na">class=</span><spanclass="s">"col-sm-9"</span><spanclass="nt">></span>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.<spanclass="nt"></dd></span>
<spanclass="nt"><dd</span><spanclass="na">class=</span><spanclass="s">"col-sm-8"</span><spanclass="nt">></span>Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.<spanclass="nt"></dd></span>
<p><em>Responsive typography</em> refers to scaling text and components by simply adjusting the root element’s <codeclass="highlighter-rouge">font-size</code> within a series of media queries. Bootstrap doesn’t do this for you, but it’s fairly easy to add if you need it.</p>
<p>Here’s an example of it in practice. Choose whatever <codeclass="highlighter-rouge">font-size</code>s and media queries you wish.</p>
