<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.">
<aclass="btn btn-sm btn-bd-light my-2 my-md-0"href="https://github.com/twbs/bootstrap/blob/v4-dev/site/content/docs/4.6/content/typography.md"title="View and edit this file on GitHub"target="_blank"rel="noopener">View on GitHub</a>
<h1class="bd-title"id="content">Typography</h1>
</div>
<pclass="bd-lead">Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.</p>
<p>Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the <ahref="/docs/4.6/utilities/text/">textual utility classes</a>.</p>
<ul>
<li>Use a <ahref="/docs/4.6/content/reboot/#native-font-stack">native font stack</a> that selects the best <code>font-family</code> for each OS and device.</li>
<li>For a more inclusive and accessible type scale, we use the browser’s default root <code>font-size</code> (typically 16px) so visitors can customize their browser defaults as needed.</li>
<li>Use the <code>$font-family-base</code>, <code>$font-size-base</code>, and <code>$line-height-base</code> attributes as our typographic base applied to the <code><body></code>.</li>
<li>Set the global link color via <code>$link-color</code> and apply link underlines only on <code>:hover</code>.</li>
<li>Use <code>$body-bg</code> to set a <code>background-color</code> on the <code><body></code> (<code>#fff</code> by default).</li>
</ul>
<p>These styles can be found within <code>_reboot.scss</code>, and the global variables are defined in <code>_variables.scss</code>. Make sure to set <code>$font-size-base</code> in <code>rem</code>.</p>
<h2id="headings">Headings</h2>
<p>All HTML headings, <code><h1></code> through <code><h6></code>, are available.</p>
</code></pre></div><p><code>.h1</code> through <code>.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. Keep in mind these headings are not responsive by default, but it’s possible to enable <ahref="#responsive-font-sizes">responsive font sizes</a>.</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><divclass="highlight"><preclass="chroma"><codeclass="language-html"data-lang="html"><spanclass="p"><</span><spanclass="nt">p</span><spanclass="p">></span>You can use the mark tag to <spanclass="p"><</span><spanclass="nt">mark</span><spanclass="p">></span>highlight<spanclass="p"></</span><spanclass="nt">mark</span><spanclass="p">></span> text.<spanclass="p"></</span><spanclass="nt">p</span><spanclass="p">></span>
<spanclass="p"><</span><spanclass="nt">p</span><spanclass="p">><</span><spanclass="nt">del</span><spanclass="p">></span>This line of text is meant to be treated as deleted text.<spanclass="p"></</span><spanclass="nt">del</span><spanclass="p">></</span><spanclass="nt">p</span><spanclass="p">></span>
<spanclass="p"><</span><spanclass="nt">p</span><spanclass="p">><</span><spanclass="nt">s</span><spanclass="p">></span>This line of text is meant to be treated as no longer accurate.<spanclass="p"></</span><spanclass="nt">s</span><spanclass="p">></</span><spanclass="nt">p</span><spanclass="p">></span>
<spanclass="p"><</span><spanclass="nt">p</span><spanclass="p">><</span><spanclass="nt">ins</span><spanclass="p">></span>This line of text is meant to be treated as an addition to the document.<spanclass="p"></</span><spanclass="nt">ins</span><spanclass="p">></</span><spanclass="nt">p</span><spanclass="p">></span>
<spanclass="p"><</span><spanclass="nt">p</span><spanclass="p">><</span><spanclass="nt">u</span><spanclass="p">></span>This line of text will render as underlined<spanclass="p"></</span><spanclass="nt">u</span><spanclass="p">></</span><spanclass="nt">p</span><spanclass="p">></span>
<spanclass="p"><</span><spanclass="nt">p</span><spanclass="p">><</span><spanclass="nt">small</span><spanclass="p">></span>This line of text is meant to be treated as fine print.<spanclass="p"></</span><spanclass="nt">small</span><spanclass="p">></</span><spanclass="nt">p</span><spanclass="p">></span>
<spanclass="p"><</span><spanclass="nt">p</span><spanclass="p">><</span><spanclass="nt">strong</span><spanclass="p">></span>This line rendered as bold text.<spanclass="p"></</span><spanclass="nt">strong</span><spanclass="p">></</span><spanclass="nt">p</span><spanclass="p">></span>
<spanclass="p"><</span><spanclass="nt">p</span><spanclass="p">><</span><spanclass="nt">em</span><spanclass="p">></span>This line rendered as italicized text.<spanclass="p"></</span><spanclass="nt">em</span><spanclass="p">></</span><spanclass="nt">p</span><spanclass="p">></span></code></pre></div>
<p><code>.mark</code> and <code>.small</code> classes are also available to apply the same styles as <code><mark></code> and <code><small></code> while avoiding any unwanted semantic implications that the tags would bring.</p>
<p>While not shown above, feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><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.6/utilities/text/">text utilities</a> and <ahref="/docs/4.6/utilities/colors/">color utilities</a>.</p>
<h2id="abbreviations">Abbreviations</h2>
<p>Stylized implementation of HTML’s <code><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 <code>.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 <code><blockquote class="blockquote"></code> around any <abbrtitle="HyperText Markup Language">HTML</abbr> as the quote.</p>
<divclass="bd-example">
<blockquoteclass="blockquote">
<pclass="mb-0">A well-known quote, contained in a blockquote element.</p>
<spanclass="p"><</span><spanclass="nt">p</span><spanclass="na">class</span><spanclass="o">=</span><spanclass="s">"mb-0"</span><spanclass="p">></span>A well-known quote, contained in a blockquote element.<spanclass="p"></</span><spanclass="nt">p</span><spanclass="p">></span>
<p>Add a <code><footer class="blockquote-footer"></code> for identifying the source. Wrap the name of the source work in <code><cite></code>.</p>
<divclass="bd-example">
<blockquoteclass="blockquote">
<pclass="mb-0">A well-known quote, contained in a blockquote element.</p>
<footerclass="blockquote-footer">Someone famous in <citetitle="Source Title">Source Title</cite></footer>
<spanclass="p"><</span><spanclass="nt">p</span><spanclass="na">class</span><spanclass="o">=</span><spanclass="s">"mb-0"</span><spanclass="p">></span>A well-known quote, contained in a blockquote element.<spanclass="p"></</span><spanclass="nt">p</span><spanclass="p">></span>
<spanclass="p"><</span><spanclass="nt">footer</span><spanclass="na">class</span><spanclass="o">=</span><spanclass="s">"blockquote-footer"</span><spanclass="p">></span>Someone famous in <spanclass="p"><</span><spanclass="nt">cite</span><spanclass="na">title</span><spanclass="o">=</span><spanclass="s">"Source Title"</span><spanclass="p">></span>Source Title<spanclass="p"></</span><spanclass="nt">cite</span><spanclass="p">></</span><spanclass="nt">footer</span><spanclass="p">></span>
<spanclass="p"><</span><spanclass="nt">p</span><spanclass="na">class</span><spanclass="o">=</span><spanclass="s">"mb-0"</span><spanclass="p">></span>>A well-known quote, contained in a blockquote element.<spanclass="p"></</span><spanclass="nt">p</span><spanclass="p">></span>
<spanclass="p"><</span><spanclass="nt">footer</span><spanclass="na">class</span><spanclass="o">=</span><spanclass="s">"blockquote-footer"</span><spanclass="p">></span>Someone famous in <spanclass="p"><</span><spanclass="nt">cite</span><spanclass="na">title</span><spanclass="o">=</span><spanclass="s">"Source Title"</span><spanclass="p">></span>Source Title<spanclass="p"></</span><spanclass="nt">cite</span><spanclass="p">></</span><spanclass="nt">footer</span><spanclass="p">></span>
<spanclass="p"><</span><spanclass="nt">p</span><spanclass="na">class</span><spanclass="o">=</span><spanclass="s">"mb-0"</span><spanclass="p">></span>A well-known quote, contained in a blockquote element.<spanclass="p"></</span><spanclass="nt">p</span><spanclass="p">></span>
<spanclass="p"><</span><spanclass="nt">footer</span><spanclass="na">class</span><spanclass="o">=</span><spanclass="s">"blockquote-footer"</span><spanclass="p">></span>Someone famous in <spanclass="p"><</span><spanclass="nt">cite</span><spanclass="na">title</span><spanclass="o">=</span><spanclass="s">"Source Title"</span><spanclass="p">></span>Source Title<spanclass="p"></</span><spanclass="nt">cite</span><spanclass="p">></</span><spanclass="nt">footer</span><spanclass="p">></span>
<p>Remove the default <code>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>
<divclass="bd-example">
<ulclass="list-unstyled">
<li>This is a list.</li>
<li>It appears completely unstyled.</li>
<li>Structurally, it's still a list.</li>
<li>However, this style only applies to immediate child elements.</li>
<li>Nested lists:
<ul>
<li>are unaffected by this style</li>
<li>will still show a bullet</li>
<li>and have appropriate left margin</li>
</ul>
</li>
<li>This may still come in handy in some situations.</li>
<spanclass="p"><</span><spanclass="nt">li</span><spanclass="p">></span>This is a list.<spanclass="p"></</span><spanclass="nt">li</span><spanclass="p">></span>
<spanclass="p"><</span><spanclass="nt">li</span><spanclass="p">></span>Structurally, it's still a list.<spanclass="p"></</span><spanclass="nt">li</span><spanclass="p">></span>
<spanclass="p"><</span><spanclass="nt">li</span><spanclass="p">></span>However, this style only applies to immediate child elements.<spanclass="p"></</span><spanclass="nt">li</span><spanclass="p">></span>
<spanclass="p"><</span><spanclass="nt">li</span><spanclass="p">></span>are unaffected by this style<spanclass="p"></</span><spanclass="nt">li</span><spanclass="p">></span>
<spanclass="p"><</span><spanclass="nt">li</span><spanclass="p">></span>will still show a bullet<spanclass="p"></</span><spanclass="nt">li</span><spanclass="p">></span>
<spanclass="p"><</span><spanclass="nt">li</span><spanclass="p">></span>and have appropriate left margin<spanclass="p"></</span><spanclass="nt">li</span><spanclass="p">></span>
<spanclass="p"><</span><spanclass="nt">li</span><spanclass="p">></span>This may still come in handy in some situations.<spanclass="p"></</span><spanclass="nt">li</span><spanclass="p">></span>
<p>Remove a list’s bullets and apply some light <code>margin</code> with a combination of two classes, <code>.list-inline</code> and <code>.list-inline-item</code>.</p>
<divclass="bd-example">
<ulclass="list-inline">
<liclass="list-inline-item">This is a list item.</li>
<spanclass="p"><</span><spanclass="nt">li</span><spanclass="na">class</span><spanclass="o">=</span><spanclass="s">"list-inline-item"</span><spanclass="p">></span>This is a list item.<spanclass="p"></</span><spanclass="nt">li</span><spanclass="p">></span>
<spanclass="p"><</span><spanclass="nt">li</span><spanclass="na">class</span><spanclass="o">=</span><spanclass="s">"list-inline-item"</span><spanclass="p">></span>And another one.<spanclass="p"></</span><spanclass="nt">li</span><spanclass="p">></span>
<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 <code>.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">Term</dt>
<ddclass="col-sm-9">
<p>Definition for the term.</p>
<p>And some more placeholder definition text.</p>
</dd>
<dtclass="col-sm-3">Another term</dt>
<ddclass="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>
<dtclass="col-sm-3 text-truncate">Truncated term is truncated</dt>
<ddclass="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</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">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
<spanclass="p"><</span><spanclass="nt">dd</span><spanclass="na">class</span><spanclass="o">=</span><spanclass="s">"col-sm-9"</span><spanclass="p">></span>A description list is perfect for defining terms.<spanclass="p"></</span><spanclass="nt">dd</span><spanclass="p">></span>
<spanclass="p"><</span><spanclass="nt">p</span><spanclass="p">></span>Definition for the term.<spanclass="p"></</span><spanclass="nt">p</span><spanclass="p">></span>
<spanclass="p"><</span><spanclass="nt">p</span><spanclass="p">></span>And some more placeholder definition text.<spanclass="p"></</span><spanclass="nt">p</span><spanclass="p">></span>
<spanclass="p"><</span><spanclass="nt">dd</span><spanclass="na">class</span><spanclass="o">=</span><spanclass="s">"col-sm-9"</span><spanclass="p">></span>This definition is short, so no extra paragraphs or anything.<spanclass="p"></</span><spanclass="nt">dd</span><spanclass="p">></span>
<spanclass="p"><</span><spanclass="nt">dt</span><spanclass="na">class</span><spanclass="o">=</span><spanclass="s">"col-sm-3 text-truncate"</span><spanclass="p">></span>Truncated term is truncated<spanclass="p"></</span><spanclass="nt">dt</span><spanclass="p">></span>
<spanclass="p"><</span><spanclass="nt">dd</span><spanclass="na">class</span><spanclass="o">=</span><spanclass="s">"col-sm-9"</span><spanclass="p">></span>This can be useful when space is tight. Adds an ellipsis at the end.<spanclass="p"></</span><spanclass="nt">dd</span><spanclass="p">></span>
<spanclass="p"><</span><spanclass="nt">dd</span><spanclass="na">class</span><spanclass="o">=</span><spanclass="s">"col-sm-8"</span><spanclass="p">></span>I heard you like definition lists. Let me put a definition list inside your definition list.<spanclass="p"></</span><spanclass="nt">dd</span><spanclass="p">></span>
<h2id="responsive-font-sizes">Responsive font sizes</h2>
<p>As of v4.3.0, Bootstrap ships with the option to enable responsive font sizes, allowing text to scale more naturally across device and viewport sizes. <abbrtitle="Responsive font sizes">RFS</abbr> can be enabled by changing the <code>$enable-responsive-font-sizes</code> Sass variable to <code>true</code> and recompiling Bootstrap.</p>
<p>To support <abbrtitle="Responsive font sizes">RFS</abbr>, we use a Sass mixin to replace our normal <code>font-size</code> properties. Responsive font sizes will be compiled into <code>calc()</code> functions with a mix of <code>rem</code> and viewport units to enable the responsive scaling behavior. More about <abbrtitle="Responsive font sizes">RFS</abbr> and its configuration can be found on its <ahref="https://github.com/twbs/rfs/tree/v8.0.4">GitHub repository</a>.</p>
