Larger heading styles to make content stand out. Responsive styles are not included by default. You can set them through the $display-* map or write your own media queries.
Lead Body Text: Milk filter lungo as galão roast that crema blue mountain
shop turkish.
Snippet
<pclassName="lead">
Lead Body Text: Milk filter lungo as galão roast that crema blue mountain shop
turkish.
</p>
Highlight Text
Use the mark tag or add the mark class to your HTML element to highlight text. The class clay-dark can be added to the element or the parent element for dark themed highlighting.
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
Snippet
<p>
<ahref="#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: <abbrtitle="attribute">attr</abbr></p>
<p>LOWERCASED TEXT: <spanclassName="text-lowercase">LOWERCASED TEXT</span></p>
<p>uppercased text: <spanclassName="text-uppercase">uppercased text</span></p>
<p>
capitalized text: <spanclassName="text-capitalize">capitalized text</span>
</p>
Reference Mark
Use <span className="reference-mark"></span> to add a reference mark next to some text.
<div>
Reference Mark<spanclassName="reference-mark"id="referenceMark1">[1]</span>
with text.
</div>
<div>
Reference Mark<spanclassName="reference-mark"id="referenceMark4"
><svgclassName="lexicon-icon lexicon-icon-asterisk"focusable="false"role="presentation"
>
<usehref="/images/icons/icons.svg#asterisk" /></svg
></span>
with lexicon-icon-asterisk.
</div>
<h4>Footnotes</h4>
<div>
<aclassName="reference-mark"href="#referenceMark1">[1]</a> A reference to
the text above, respectively.
</div>
<div>
<aclassName="reference-mark"href="#referenceMark4"
><svgclassName="lexicon-icon lexicon-icon-asterisk"focusable="false"role="presentation"
>
<usehref="/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-truncate class. This uses display: 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.
Snippet
<pclassName="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-inline class to shorten long lines of text.
<ahref="#1"className="text-blue"
>text-blue: Milk filter lungo as galão roast that crema blue mountain shop
turkish.</a
>
<ahref="#1"className="text-indigo"
>text-indigo: Milk filter lungo as galão roast that crema blue mountain shop
turkish.</a
>
<ahref="#1"className="text-purple"
>text-purple: Milk filter lungo as galão roast that crema blue mountain shop
turkish.</a
>
<ahref="#1"className="text-pink"
>text-pink: Milk filter lungo as galão roast that crema blue mountain shop
turkish.</a
>
<ahref="#1"className="text-red"
>text-red: Milk filter lungo as galão roast that crema blue mountain shop
turkish.</a
>
<ahref="#1"className="text-orange"
>text-orange: Milk filter lungo as galão roast that crema blue mountain shop
turkish.</a
>
<ahref="#1"className="text-yellow"
>text-yellow: Milk filter lungo as galão roast that crema blue mountain shop
turkish.</a
>
<ahref="#1"className="text-green"
>text-green: Milk filter lungo as galão roast that crema blue mountain shop
turkish.</a
>
<ahref="#1"className="text-teal"
>text-teal: Milk filter lungo as galão roast that crema blue mountain shop
turkish.</a
>
<ahref="#1"className="text-cyan"
>text-cyan: Milk filter lungo as galão roast that crema blue mountain shop
turkish.</a
>
<ahref="#1"className="text-muted"
>text-muted: Milk filter lungo as galão roast that crema blue mountain shop
turkish.</a
>
<ahref="#1"className="text-primary"
>text-primary: Milk filter lungo as galão roast that crema blue mountain shop
turkish.</a
>
<ahref="#1"className="text-secondary"
>text-secondary: Milk filter lungo as galão roast that crema blue mountain
shop turkish.</a
>
<ahref="#1"className="text-info"
>text-info: Milk filter lungo as galão roast that crema blue mountain shop
turkish.</a
>
<ahref="#1"className="text-success"
>text-success: Milk filter lungo as galão roast that crema blue mountain shop
turkish.</a
>
<ahref="#1"className="text-warning"
>text-warning: Milk filter lungo as galão roast that crema blue mountain shop
turkish.</a
>
<ahref="#1"className="text-danger"
>text-danger: Milk filter lungo as galão roast that crema blue mountain shop
turkish.</a
>
Contextual Backgrounds
bg-blue: Milk filter lungo as galão roast that crema blue mountain shop
turkish.
bg-indigo: Milk filter lungo as galão roast that crema blue mountain shop
turkish.
bg-purple: Milk filter lungo as galão roast that crema blue mountain shop
turkish.
bg-pink: Milk filter lungo as galão roast that crema blue mountain shop
turkish.
bg-red: Milk filter lungo as galão roast that crema blue mountain shop
turkish.
bg-orange: Milk filter lungo as galão roast that crema blue mountain shop
turkish.
bg-yellow: Milk filter lungo as galão roast that crema blue mountain shop
turkish.
bg-green: Milk filter lungo as galão roast that crema blue mountain shop
turkish.
bg-teal: Milk filter lungo as galão roast that crema blue mountain shop
turkish.
bg-cyan: Milk filter lungo as galão roast that crema blue mountain shop
turkish.
bg-primary: Milk filter lungo as galão roast that crema blue mountain shop
turkish.
bg-secondary: Milk filter lungo as galão roast that crema blue mountain
shop turkish.
bg-success: Milk filter lungo as galão roast that crema blue mountain shop
turkish.
bg-info: Milk filter lungo as galão roast that crema blue mountain shop
turkish.
bg-warning: Milk filter lungo as galão roast that crema blue mountain shop
turkish.
bg-danger: Milk filter lungo as galão roast that crema blue mountain shop
turkish.
Snippet
<spanclassName="bg-blue"
>bg-blue: Milk filter lungo as galão roast that crema blue mountain shop
turkish.</span
>
<spanclassName="bg-indigo"
>bg-indigo: Milk filter lungo as galão roast that crema blue mountain shop
turkish.</span
>
<spanclassName="bg-purple"
>bg-purple: Milk filter lungo as galão roast that crema blue mountain shop
turkish.</span
>
<spanclassName="bg-pink"
>bg-pink: Milk filter lungo as galão roast that crema blue mountain shop
turkish.</span
>
<spanclassName="bg-red"
>bg-red: Milk filter lungo as galão roast that crema blue mountain shop
turkish.</span
>
<spanclassName="bg-orange"
>bg-orange: Milk filter lungo as galão roast that crema blue mountain shop
turkish.</span
>
<spanclassName="bg-yellow"
>bg-yellow: Milk filter lungo as galão roast that crema blue mountain shop
turkish.</span
>
<spanclassName="bg-green"
>bg-green: Milk filter lungo as galão roast that crema blue mountain shop
turkish.</span
>
<spanclassName="bg-teal"
>bg-teal: Milk filter lungo as galão roast that crema blue mountain shop
turkish.</span
>
<spanclassName="bg-cyan"
>bg-cyan: Milk filter lungo as galão roast that crema blue mountain shop
turkish.</span
>
<spanclassName="bg-primary"
>bg-primary: Milk filter lungo as galão roast that crema blue mountain shop
turkish.</span
>
<spanclassName="bg-secondary"
>bg-secondary: Milk filter lungo as galão roast that crema blue mountain shop
turkish.</span
>
<spanclassName="bg-success"
>bg-success: Milk filter lungo as galão roast that crema blue mountain shop
turkish.</span
>
<spanclassName="bg-info"
>bg-info: Milk filter lungo as galão roast that crema blue mountain shop
turkish.</span
>
<spanclassName="bg-warning"
>bg-warning: Milk filter lungo as galão roast that crema blue mountain shop
turkish.</span
>
<spanclassName="bg-danger"
>bg-danger: Milk filter lungo as galão roast that crema blue mountain shop
turkish.</span
>
Address
Liferay, Inc. 1400 Montefino Ave. Diamond Bar, CA 91765 P:+1-877-LIFERAY (1-877-543-3729)Full Name joe.bloggs@liferay.com
For example, <section> should be wrapped as inline.
Snippet
<p>For example, <code><section></code> should be wrapped as inline.</p>
User Input
For example, press ctrl + , to edit settings.
Snippet
<p>
For example, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> to edit settings.
</p>
Variables
For example, y = mx + b
Snippet
<p>For example, <var>y</var> = <var>m</var><var>x</var> + <var>b</var></p>
Sample Output
This text is meant to be treated as sample output from a computer program.
Snippet
<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.
Snippet
<blockquoteclassName="blockquote">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.
</div>
</blockquote>
<blockquoteclassName="blockquote">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.
</div>
<footerclassName="blockquote-footer">
Someone famous in <citetitle="Source Title">Source Title</cite>
</footer>
</blockquote>