|
<p>Bootstrap includes simple and easily customized typography for headings, body text, lists, and more. For even more control, check out the <a href="/components/utilities/">textual utility classes</a>.</p>
<h2 id="contents"><a class="anchorjs-link " href="#contents" aria-label="Anchor link for: contents" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Contents</h2>
<ul id="markdown-toc">
<li><a href="#contents" id="markdown-toc-contents">Contents</a></li>
<li><a href="#global-settings" id="markdown-toc-global-settings">Global settings</a></li>
<li><a href="#headings" id="markdown-toc-headings">Headings</a> <ul>
<li><a href="#customizing-headings" id="markdown-toc-customizing-headings">Customizing headings</a></li>
</ul>
</li>
<li><a href="#display-headings" id="markdown-toc-display-headings">Display headings</a></li>
<li><a href="#lead" id="markdown-toc-lead">Lead</a></li>
<li><a href="#inline-text-elements" id="markdown-toc-inline-text-elements">Inline text elements</a></li>
<li><a href="#abbreviations" id="markdown-toc-abbreviations">Abbreviations</a></li>
<li><a href="#blockquotes" id="markdown-toc-blockquotes">Blockquotes</a> <ul>
<li><a href="#naming-a-source" id="markdown-toc-naming-a-source">Naming a source</a></li>
<li><a href="#reverse-layout" id="markdown-toc-reverse-layout">Reverse layout</a></li>
</ul>
</li>
<li><a href="#lists" id="markdown-toc-lists">Lists</a> <ul>
<li><a href="#unstyled" id="markdown-toc-unstyled">Unstyled</a></li>
<li><a href="#inline" id="markdown-toc-inline">Inline</a></li>
<li><a href="#horizontal-description" id="markdown-toc-horizontal-description">Horizontal description</a></li>
</ul>
</li>
</ul>
<h2 id="global-settings"><a class="anchorjs-link " href="#global-settings" aria-label="Anchor link for: global settings" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Global settings</h2>
<p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p>
<ul>
<li>Set <code>background-color: #fff;</code> on the <code><body></code></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</li>
<li>Set the global link color via <code>$link-color</code> and apply link underlines only on <code>:hover</code></li>
</ul>
<p>These styles can be found within <code>_reboot.scss</code>.</p>
<h2 id="headings"><a class="anchorjs-link " href="#headings" aria-label="Anchor link for: headings" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Headings</h2>
<p>All HTML headings, <code><h1></code> through <code><h6></code>, are available. <code>.h1</code> through <code>.h6</code> 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.</p>
<div class="bd-example bd-example-type">
<table class="table">
<tbody>
<tr>
<td><h1>h1. Bootstrap heading</h1></td>
<td class="type-info">Semibold 36px</td>
</tr>
<tr>
<td><h2>h2. Bootstrap heading</h2></td>
<td class="type-info">Semibold 30px</td>
</tr>
<tr>
<td><h3>h3. Bootstrap heading</h3></td>
<td class="type-info">Semibold 24px</td>
</tr>
<tr>
<td><h4>h4. Bootstrap heading</h4></td>
<td class="type-info">Semibold 18px</td>
</tr>
<tr>
<td><h5>h5. Bootstrap heading</h5></td>
<td class="type-info">Semibold 14px</td>
</tr>
<tr>
<td><h6>h6. Bootstrap heading</h6></td>
<td class="type-info">Semibold 12px</td>
</tr>
</tbody>
</table>
</div>
<div class="zero-clipboard"></div><div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><h1></span>h1. Bootstrap heading<span class="nt"></h1></span>
<span class="nt"><h2></span>h2. Bootstrap heading<span class="nt"></h2></span>
<span class="nt"><h3></span>h3. Bootstrap heading<span class="nt"></h3></span>
<span class="nt"><h4></span>h4. Bootstrap heading<span class="nt"></h4></span>
<span class="nt"><h5></span>h5. Bootstrap heading<span class="nt"></h5></span>
<span class="nt"><h6></span>h6. Bootstrap heading<span class="nt"></h6></span></code></pre></div>
<h3 id="customizing-headings"><a class="anchorjs-link " href="#customizing-headings" aria-label="Anchor link for: customizing headings" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Customizing headings</h3>
<p>Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.</p>
<div class="bd-example" data-example-id="">
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
</div>
<div class="zero-clipboard"></div><div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><h3></span>
Fancy display heading
<span class="nt"><small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>With faded secondary text<span class="nt"></small></span>
<span class="nt"></h3></span></code></pre></div>
<h2 id="display-headings"><a class="anchorjs-link " href="#display-headings" aria-label="Anchor link for: display headings" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Display headings</h2>
<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>
<div class="bd-example bd-example-type">
<table class="table">
<tbody>
<tr>
<td><h1 class="display-4">Display 4</h1></td>
</tr>
<tr>
<td><h1 class="display-3">Display 3</h1></td>
</tr>
<tr>
<td><h1 class="display-2">Display 2</h1></td>
</tr>
<tr>
<td><h1 class="display-1">Display 1</h1></td>
</tr>
</tbody>
</table>
</div>
<div class="zero-clipboard"></div><div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><h1</span> <span class="na">class=</span><span class="s">"display-4"</span><span class="nt">></span>Display 4<span class="nt"></h1></span>
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"display-3"</span><span class="nt">></span>Display 3<span class="nt"></h1></span>
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"display-2"</span><span class="nt">></span>Display 2<span class="nt"></h1></span>
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"display-1"</span><span class="nt">></span>Display 1<span class="nt"></h1></span></code></pre></div>
<h2 id="lead"><a class="anchorjs-link " href="#lead" aria-label="Anchor link for: lead" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Lead</h2>
<p>Make a paragraph stand out by adding <code>.lead</code>.</p>
<div class="bd-example" data-example-id="">
<p class="lead">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>
</div>
<div class="zero-clipboard"></div><div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p</span> <span class="na">class=</span><span class="s">"lead"</span><span class="nt">></span>
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<span class="nt"></p></span></code></pre></div>
<h2 id="inline-text-elements"><a class="anchorjs-link " href="#inline-text-elements" aria-label="Anchor link for: inline text elements" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Inline text elements</h2>
<p>Styling for common inline HTML5 elements.</p>
<div class="bd-example" data-example-id="">
<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>
<div class="zero-clipboard"></div><div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p></span>You can use the mark tag to <span class="nt"><mark></span>highlight<span class="nt"></mark></span> text.<span class="nt"></p></span>
<span class="nt"><p><del></span>This line of text is meant to be treated as deleted text.<span class="nt"></del></p></span>
<span class="nt"><p><s></span>This line of text is meant to be treated as no longer accurate.<span class="nt"></s></p></span>
<span class="nt"><p><ins></span>This line of text is meant to be treated as an addition to the document.<span class="nt"></ins></p></span>
<span class="nt"><p><u></span>This line of text will render as underlined<span class="nt"></u></p></span>
<span class="nt"><p><small></span>This line of text is meant to be treated as fine print.<span class="nt"></small></p></span>
<span class="nt"><p><strong></span>This line rendered as bold text.<span class="nt"></strong></p></span>
<span class="nt"><p><em></span>This line rendered as italicized text.<span class="nt"></em></p></span></code></pre></div>
<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>
<h2 id="abbreviations"><a class="anchorjs-link " href="#abbreviations" aria-label="Anchor link for: abbreviations" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Abbreviations</h2>
<p>Stylized implementation of HTML’s <code><abbr></code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing 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>
<div class="bd-example" data-example-id="">
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
</div>
<div class="zero-clipboard"></div><div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p><abbr</span> <span class="na">title=</span><span class="s">"attribute"</span><span class="nt">></span>attr<span class="nt"></abbr></p></span>
<span class="nt"><p><abbr</span> <span class="na">title=</span><span class="s">"HyperText Markup Language"</span> <span class="na">class=</span><span class="s">"initialism"</span><span class="nt">></span>HTML<span class="nt"></abbr></p></span></code></pre></div>
<h2 id="blockquotes"><a class="anchorjs-link " href="#blockquotes" aria-label="Anchor link for: blockquotes" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Blockquotes</h2>
<p>For quoting blocks of content from another source within your document. Wrap <code><blockquote></code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes, we recommend a <code><p></code>.</p>
<div class="bd-example" data-example-id="">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
</div>
<div class="zero-clipboard"></div><div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><blockquote></span>
<span class="nt"><p></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<span class="nt"></p></span>
<span class="nt"></blockquote></span></code></pre></div>
<h3 id="naming-a-source"><a class="anchorjs-link " href="#naming-a-source" aria-label="Anchor link for: naming a source" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Naming a source</h3>
<p>Add a <code><footer></code> for identifying the source. Wrap the name of the source work in <code><cite></code>.</p>
<div class="bd-example" data-example-id="">
<blockquote class="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>
</div>
<div class="zero-clipboard"></div><div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><blockquote</span> <span class="na">class=</span><span class="s">"blockquote"</span><span class="nt">></span>
<span class="nt"><p></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<span class="nt"></p></span>
<span class="nt"><footer></span>Someone famous in <span class="nt"><cite</span> <span class="na">title=</span><span class="s">"Source Title"</span><span class="nt">></span>Source Title<span class="nt"></cite></footer></span>
<span class="nt"></blockquote></span></code></pre></div>
<h3 id="reverse-layout"><a class="anchorjs-link " href="#reverse-layout" aria-label="Anchor link for: reverse layout" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Reverse layout</h3>
<p>Add <code>.blockquote-reverse</code> for a blockquote with right-aligned content.</p>
<div class="bd-example" data-example-id="">
<blockquote class="blockquote blockquote-reverse">
<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>
</div>
<div class="zero-clipboard"></div><div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><blockquote</span> <span class="na">class=</span><span class="s">"blockquote blockquote-reverse"</span><span class="nt">></span>
<span class="nt"><p></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<span class="nt"></p></span>
<span class="nt"><footer></span>Someone famous in <span class="nt"><cite</span> <span class="na">title=</span><span class="s">"Source Title"</span><span class="nt">></span>Source Title<span class="nt"></cite></footer></span>
<span class="nt"></blockquote></span></code></pre></div>
<h2 id="lists"><a class="anchorjs-link " href="#lists" aria-label="Anchor link for: lists" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Lists</h2>
<h3 id="unstyled"><a class="anchorjs-link " href="#unstyled" aria-label="Anchor link for: unstyled" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Unstyled</h3>
<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>
<div class="bd-example" data-example-id="">
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
</div>
<div class="zero-clipboard"></div><div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-unstyled"</span><span class="nt">></span>
<span class="nt"><li></span>Lorem ipsum dolor sit amet<span class="nt"></li></span>
<span class="nt"><li></span>Consectetur adipiscing elit<span class="nt"></li></span>
<span class="nt"><li></span>Integer molestie lorem at massa<span class="nt"></li></span>
<span class="nt"><li></span>Facilisis in pretium nisl aliquet<span class="nt"></li></span>
<span class="nt"><li></span>Nulla volutpat aliquam velit
<span class="nt"><ul></span>
<span class="nt"><li></span>Phasellus iaculis neque<span class="nt"></li></span>
<span class="nt"><li></span>Purus sodales ultricies<span class="nt"></li></span>
<span class="nt"><li></span>Vestibulum laoreet porttitor sem<span class="nt"></li></span>
<span class="nt"><li></span>Ac tristique libero volutpat at<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"></li></span>
<span class="nt"><li></span>Faucibus porta lacus fringilla vel<span class="nt"></li></span>
<span class="nt"><li></span>Aenean sit amet erat nunc<span class="nt"></li></span>
<span class="nt"><li></span>Eget porttitor lorem<span class="nt"></li></span>
<span class="nt"></ul></span></code></pre></div>
<h3 id="inline"><a class="anchorjs-link " href="#inline" aria-label="Anchor link for: inline" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Inline</h3>
<p>Place all list items on a single line with <code>display: inline-block;</code> and some light padding.</p>
<div class="bd-example" data-example-id="">
<ul class="list-inline">
<li>Lorem ipsum</li>
<li>Phasellus iaculis</li>
<li>Nulla volutpat</li>
</ul>
</div>
<div class="zero-clipboard"></div><div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-inline"</span><span class="nt">></span>
<span class="nt"><li></span>Lorem ipsum<span class="nt"></li></span>
<span class="nt"><li></span>Phasellus iaculis<span class="nt"></li></span>
<span class="nt"><li></span>Nulla volutpat<span class="nt"></li></span>
<span class="nt"></ul></span></code></pre></div>
<h3 id="horizontal-description"><a class="anchorjs-link " href="#horizontal-description" aria-label="Anchor link for: horizontal description" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Horizontal description</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>
<div class="bd-example" data-example-id="">
<dl class="dl-horizontal">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Euismod</dt>
<dd class="col-sm-9">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd class="col-sm-9 col-sm-offset-3">Donec id elit non mi porta gravida at eget metus.</dd>
<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>
</div>
<div class="zero-clipboard"></div><div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><dl</span> <span class="na">class=</span><span class="s">"dl-horizontal"</span><span class="nt">></span>
<span class="nt"><dt</span> <span class="na">class=</span><span class="s">"col-sm-3"</span><span class="nt">></span>Description lists<span class="nt"></dt></span>
<span class="nt"><dd</span> <span class="na">class=</span><span class="s">"col-sm-9"</span><span class="nt">></span>A description list is perfect for defining terms.<span class="nt"></dd></span>
<span class="nt"><dt</span> <span class="na">class=</span><span class="s">"col-sm-3"</span><span class="nt">></span>Euismod<span class="nt"></dt></span>
<span class="nt"><dd</span> <span class="na">class=</span><span class="s">"col-sm-9"</span><span class="nt">></span>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.<span class="nt"></dd></span>
<span class="nt"><dd</span> <span class="na">class=</span><span class="s">"col-sm-9 col-sm-offset-3"</span><span class="nt">></span>Donec id elit non mi porta gravida at eget metus.<span class="nt"></dd></span>
<span class="nt"><dt</span> <span class="na">class=</span><span class="s">"col-sm-3"</span><span class="nt">></span>Malesuada porta<span class="nt"></dt></span>
<span class="nt"><dd</span> <span class="na">class=</span><span class="s">"col-sm-9"</span><span class="nt">></span>Etiam porta sem malesuada magna mollis euismod.<span class="nt"></dd></span>
<span class="nt"><dt</span> <span class="na">class=</span><span class="s">"col-sm-3 text-truncate"</span><span class="nt">></span>Truncated term is truncated<span class="nt"></dt></span>
<span class="nt"><dd</span> <span class="na">class=</span><span class="s">"col-sm-9"</span><span class="nt">></span>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.<span class="nt"></dd></span>
<span class="nt"></dl></span></code></pre></div>
|
