Headings
h1 Article Heading Sub text
h2 Article Heading Sub text
h3 Article Heading Sub text
h4 Article Heading Sub text
h5 Article Heading Sub text
h6 Article Heading Sub text
<h1>h1 Article Heading <small>Sub text</small></h1>
<h2>h2 Article Heading <small>Sub text</small></h2>
<h3>h3 Article Heading <small>Sub text</small></h3>
<h4>h4 Article Heading <small>Sub text</small></h4>
<h5>h5 Article Heading <small>Sub text</small></h5>
<h6>h6 Article Heading <small>Sub text</small></h6>Lead
Lead Body Text: Milk filter lungo as galão roast that crema blue mountain shop turkish.
<p class="lead"> Lead Body Text: Milk filter lungo as galão roast that crema blue mountain shop turkish. </p>Inline Text Elements
Anchor Text: Milk filter lungo as galão roast that crema blue mountain shop turkish.
Regular Text: Milk filter lungo as galão roast that crema blue mountain shop turkish.
Marked Text: Milk filter lungo as galão roast that crema blue mountain shop turkish.
Deleted Text: Milk filter lungo as galão roast that crema blue mountain shop turkish.
Strikethrough Text: Milk filter lungo as galão roast that crema blue mountain shop turkish.
Inserted Text: Milk filter lungo as galão roast that crema blue mountain shop turkish.
Underlined Text: Milk filter lungo as galão roast that crema blue mountain shop turkish.
Small Text: Milk filter lungo as galão roast that crema blue mountain shop turkish.
Bold Text: Milk filter lungo as galão roast that crema blue mountain shop turkish.
Italics: Milk filter lungo as galão roast that crema blue mountain shop turkish.
Abbreviation: attr
LOWERCASED TEXT: LOWERCASED TEXT
uppercased text: uppercased text
capitalized text: capitalized text
<p><a href="#1">Anchor Text: Milk filter lungo as galão roast that crema blue mountain shop turkish.</a></p>
<p><span>Regular Text: Milk filter lungo as galão roast that crema blue mountain shop turkish.</span></p>
<p><mark>Marked Text: Milk filter lungo as galão roast that crema blue mountain shop turkish.</mark></p>
<p><del>Deleted Text: Milk filter lungo as galão roast that crema blue mountain shop turkish.</del></p>
<p><s>Strikethrough Text: Milk filter lungo as galão roast that crema blue mountain shop turkish.</s></p>
<p><ins>Inserted Text: Milk filter lungo as galão roast that crema blue mountain shop turkish.</ins></p>
<p><u>Underlined Text: Milk filter lungo as galão roast that crema blue mountain shop turkish.</u></p>
<p><small>Small Text: Milk filter lungo as galão roast that crema blue mountain shop turkish.</small></p>
<p><strong>Bold Text: Milk filter lungo as galão roast that crema blue mountain shop turkish.</strong></p>
<p><em>Italics: Milk filter lungo as galão roast that crema blue mountain shop turkish.</em></p>
<p>Abbreviation: <abbr title="attribute">attr</abbr></p>
<p>LOWERCASED TEXT: <span class="text-lowercase">LOWERCASED TEXT</span></p>
<p>uppercased text: <span class="text-uppercase">uppercased text</span></p>
<p>capitalized text: <span class="text-capitalize">capitalized text</span></p>Reference Mark
Use
<span class="reference-mark"></span>to add a reference mark next to some text.
Footnotes
<div>Reference Mark<span class="reference-mark" id="referenceMark1">[1]</span> with text.</div>
<div>Reference Mark<span class="reference-mark" id="referenceMark4"><svg class="lexicon-icon lexicon-icon-asterisk" focusable="false" role="presentation"><use href="/images/icons/icons.svg#asterisk" /></svg></span> with lexicon-icon-asterisk.</div>
<h4>Footnotes</h4>
<div><a class="reference-mark" href="#referenceMark1">[1]</a> A reference to the text above, respectively.</div>
<div><a class="reference-mark" href="#referenceMark4"><svg class="lexicon-icon lexicon-icon-asterisk" focusable="false" role="presentation"><use href="/images/icons/icons.svg#asterisk" /></svg></a> A reference to the text above, respectively.</div>Text Truncate
Shorten long lines of text with the
text-truncateclass. This usesdisplay: block;and should be used to truncate text in block level elements.
Milk filter lungo as galão roast that crema blue mountain shop turkish. Milk filter lungo as galão roast that crema blue mountain shop turkish. Milk filter lungo as galão roast that crema blue mountain shop turkish.
<p class="text-truncate">Milk filter lungo as galão roast that crema blue mountain shop turkish. Milk filter lungo as galão roast that crema blue mountain shop turkish. Milk filter lungo as galão roast that crema blue mountain shop turkish.</p>Text Truncate Inline
You can also use the
text-truncate-inlineclass to shorten long lines of text.
Milk filter lungo as galão roast that crema blue mountain shop turkish. ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual Milk filter lungo as galão roast that crema this is also text-truncate turkish. Milk filter lungo as galão roast that crema blue mountain shop turkish.
<a class="text-truncate-inline" href="#1"><span class="text-truncate">ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual</span></a> Milk filter lungo as galão roast that crema <a class="text-truncate-inline" href="#1"><span class="text-truncate">Contextual Texts
<a href="#1" class="text-muted">text-muted: Milk filter lungo as galão roast that crema blue mountain shop turkish.</a>
<a href="#1" class="text-primary">text-primary: Milk filter lungo as galão roast that crema blue mountain shop turkish.</a>
<a href="#1" class="text-secondary">text-secondary: Milk filter lungo as galão roast that crema blue mountain shop turkish.</a>
<a href="#1" class="text-info">text-info: Milk filter lungo as galão roast that crema blue mountain shop turkish.</a>
<a href="#1" class="text-success">text-success: Milk filter lungo as galão roast that crema blue mountain shop turkish.</a>
<a href="#1" class="text-warning">text-warning: Milk filter lungo as galão roast that crema blue mountain shop turkish.</a>
<a href="#1" class="text-danger">text-danger: Milk filter lungo as galão roast that crema blue mountain shop turkish.</a>Contextual Backgrounds
<span class="bg-primary">bg-primary: Milk filter lungo as galão roast that crema blue mountain shop turkish.</span>
<span class="bg-secondary">bg-secondary: Milk filter lungo as galão roast that crema blue mountain shop turkish.</span>
<span class="bg-success">bg-success: Milk filter lungo as galão roast that crema blue mountain shop turkish.</span>
<span class="bg-info">bg-info: Milk filter lungo as galão roast that crema blue mountain shop turkish.</span>
<span class="bg-warning">bg-warning: Milk filter lungo as galão roast that crema blue mountain shop turkish.</span>
<span class="bg-danger">bg-danger: Milk filter lungo as galão roast that crema blue mountain shop turkish.</span>Address
1400 Montefino Ave.
Diamond Bar, CA 91765
P: +1-877-LIFERAY (1-877-543-3729) Full Name
[email protected]
<address>
<strong>Liferay, Inc.</strong><br/>
1400 Montefino Ave.<br/>
Diamond Bar, CA 91765<br/>
<abbr class="initialism" title="Phone">P:</abbr> +1-877-LIFERAY (1-877-543-3729)
</address>
<address>
<strong>Full Name</strong><br/>
<a href="mailto:#">[email protected]</a>
</address>Inline Code
For example, <section> should be wrapped as inline.
<p>For example, <code><section></code> should be wrapped as inline.</p>User Input
For example, press ctrl + , to edit settings.
<p>For example, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> to edit settings.</p>Variables
For example, y = mx + b
<p>For example, <var>y</var> = <var>m</var><var>x</var> + <var>b</var></p>Sample Output
<samp>This text is meant to be treated as sample output from a computer program.</samp>Blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote class="blockquote">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</div>
</blockquote>
<blockquote class="blockquote">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</div>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>