<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 mb-2 mb-md-0"href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.0/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>
<li><ahref="#naming-a-source">Naming a source</a></li>
<li><ahref="#alignment">Alignment</a></li>
</ul>
</li>
<li><ahref="#lists">Lists</a>
<ul>
<li><ahref="#unstyled">Unstyled</a></li>
<li><ahref="#inline">Inline</a></li>
<li><ahref="#description-list-alignment">Description list alignment</a></li>
</ul>
</li>
<li><ahref="#responsive-font-sizes">Responsive font sizes</a></li>
</ul>
</nav>
</div>
<divclass="bd-content ps-lg-4">
<h2id="global-settings">Global settings</h2>
<p>Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the <ahref="/docs/5.0/utilities/text/">textual utility classes</a>.</p>
<ul>
<li>Use a <ahref="/docs/5.0/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>.</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.</p>
</code></pre></div><p>Display headings are configured via the <code>$display-font-sizes</code> Sass map and two variables, <code>$display-font-weight</code> and <code>$display-line-height</code>.</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>Beware that those tags should be used for semantic purpose:</p>
<ul>
<li><code><mark></code> represents text which is marked or highlighted for reference or notation purposes.</li>
<li><code><small></code> represents side-comments and small print, like copyright and legal text.</li>
<li><code><s></code> represents element that are no longer relevant or no longer accurate.</li>
<li><code><u></code> represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.</li>
</ul>
<p>If you want to style your text, you should use the following classes instead:</p>
<ul>
<li><code>.mark</code> will apply the same styles as <code><mark></code>.</li>
<li><code>.small</code> will apply the same styles as <code><small></code>.</li>
<li><code>.text-decoration-underline</code> will apply the same styles as <code><u></code>.</li>
<li><code>.text-decoration-line-through</code> will apply the same styles as <code><s></code>.</li>
</ul>
<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, line-height, decoration and color with our <ahref="/docs/5.0/utilities/text/">text utilities</a> and <ahref="/docs/5.0/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">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<spanclass="p"><</span><spanclass="nt">p</span><spanclass="p">></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<spanclass="p"></</span><spanclass="nt">p</span><spanclass="p">></span>
<p>The HTML spec requires that blockquote attribution be placed outside the <code><blockquote></code>. When providing attribution, wrap your <code><blockquote></code> in a <code><figure></code> and use a <code><figcaption></code> or a block level element (e.g., <code><p></code>) with the <code>.blockquote-footer</code> class. Be sure to wrap the name of the source work in <code><cite></code> as well.</p>
<divclass="bd-example">
<figure>
<blockquoteclass="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
<figcaptionclass="blockquote-footer">
Someone famous in <citetitle="Source Title">Source Title</cite>
<spanclass="p"><</span><spanclass="nt">p</span><spanclass="p">></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<spanclass="p"></</span><spanclass="nt">p</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="p"><</span><spanclass="nt">p</span><spanclass="p">></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<spanclass="p"></</span><spanclass="nt">p</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="p"><</span><spanclass="nt">p</span><spanclass="p">></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<spanclass="p"></</span><spanclass="nt">p</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>
<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>
<spanclass="p"><</span><spanclass="nt">li</span><spanclass="p">></span>Lorem ipsum dolor sit amet<spanclass="p"></</span><spanclass="nt">li</span><spanclass="p">></span>
<spanclass="p"><</span><spanclass="nt">li</span><spanclass="p">></span>Integer molestie lorem at massa<spanclass="p"></</span><spanclass="nt">li</span><spanclass="p">></span>
<spanclass="p"><</span><spanclass="nt">li</span><spanclass="p">></span>Facilisis in pretium nisl aliquet<spanclass="p"></</span><spanclass="nt">li</span><spanclass="p">></span>
<spanclass="p"><</span><spanclass="nt">li</span><spanclass="p">></span>Purus sodales ultricies<spanclass="p"></</span><spanclass="nt">li</span><spanclass="p">></span>
<spanclass="p"><</span><spanclass="nt">li</span><spanclass="p">></span>Faucibus porta lacus fringilla vel<spanclass="p"></</span><spanclass="nt">li</span><spanclass="p">></span>
<spanclass="p"><</span><spanclass="nt">li</span><spanclass="p">></span>Aenean sit amet erat nunc<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>
<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">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="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>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.<spanclass="p"></</span><spanclass="nt">p</span><spanclass="p">></span>
<spanclass="p"><</span><spanclass="nt">p</span><spanclass="p">></span>Donec id elit non mi porta gravida at eget metus.<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>Etiam porta sem malesuada magna mollis euismod.<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>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.<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>Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.<spanclass="p"></</span><spanclass="nt">dd</span><spanclass="p">></span>
<h2id="responsive-font-sizes">Responsive font sizes</h2>
<p>In Bootstrap 5, we’ve enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes. Have a look at the <ahref="/docs/5.0/getting-started/rfs/">RFS page</a> to find out how this works.</p>
<pclass="mb-0">Designed and built with all the love in the world by the <ahref="/docs/5.0/about/team/">Bootstrap team</a> with the help of <ahref="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
