Typography
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>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.
<a>...</a>
<span>...</span>
<mark>...</mark> or <span class="mark">...</span>
<del>...</del>
<s>...</s>
<ins>...</ins>
<u>...</u>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.
<small>...</small>
<strong>...</strong>
<em>...</em>Abbreviation: attr
LOWERCASED TEXT: LOWERCASED TEXT
uppercased text: uppercased text
capitalized text: capitalized text
<abbr>...</abbr>
<span class="text-lowercase">...</span>
<span class="text-uppercase">...</span>
<span class="text-capitalize">...</span>Reference Mark
Add a reference mark next to some text with
<span class="reference-mark"></span>.
Footnotes
<div>
Reference Mark<span class="reference-mark" id="referenceMark1">[1]</span> with text.
</div>
<div>
<a class="reference-mark" href="#referenceMark1">[1]</a> A reference to the text above, respectively.
</div>Truncate Text
Shorten long lines of text with the class
truncate-text.
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="truncate-text">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>Contextual Texts
<a href="#1" class="text-muted">...</a>
<a href="#1" class="text-default">...</a>
<a href="#1" class="text-primary">...</a>
<a href="#1" class="text-success">...</a>
<a href="#1" class="text-info">...</a>
<a href="#1" class="text-warning">...</a>
<a href="#1" class="text-danger">...</a>Contextual Backgrounds
<span class="bg-default">...</span>
<span class="bg-primary">...</span>
<span class="bg-success">...</span>
<span class="bg-info">...</span>
<span class="bg-warning">...</span>
<span class="bg-danger">...</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
<address>
<strong>Liferay, Inc.</strong><br>
1400 Montefino Ave.<br>
Diamond Bar, CA 91765<br>
<abbr title="Phone">P:</abbr> +1-877-LIFERAY (1-877-543-3729)
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">joe.bloggs@liferay.com</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
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>Sample Output
This text is meant to be treated as sample output from a computer program.<samp>This text is meant to be treated as sample output from a computer program.</samp>Basic Code Block
body {
background-color: #FFF;
}
<pre>
body {
background-color: #FFF;
}
</pre>blockquote
Milk filter lungo as galão roast that crema blue mountain shop turkish.
Someone famous in Source Title
blockquote-default
Milk filter lungo as galão roast that crema blue mountain shop turkish.
Someone famous in Source Title
blockquote-primary
Milk filter lungo as galão roast that crema blue mountain shop turkish.
Someone famous in Source Title
blockquote-info
Milk filter lungo as galão roast that crema blue mountain shop turkish.
Someone famous in Source Title
blockquote-success
Milk filter lungo as galão roast that crema blue mountain shop turkish.
Someone famous in Source Title
blockquote-warning
Milk filter lungo as galão roast that crema blue mountain shop turkish.
Someone famous in Source Title
blockquote-danger
Milk filter lungo as galão roast that crema blue mountain shop turkish.
Someone famous in Source Title
Blockquote Reverse
Milk filter lungo as galão roast that crema blue mountain shop turkish.
Someone famous in Source Title
<blockquote class="blockquote-reverse">
<p>Milk filter lungo as galão roast that crema blue mountain shop turkish.</p>
<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>Blockquote Sizes
blockquote-xs
Milk filter lungo as galão roast that crema blue mountain shop turkish.
Someone famous in Source Title
blockquote-sm
Milk filter lungo as galão roast that crema blue mountain shop turkish.
Someone famous in Source Title
blockquote
Milk filter lungo as galão roast that crema blue mountain shop turkish.
Someone famous in Source Title
blockquote-lg
Milk filter lungo as galão roast that crema blue mountain shop turkish.
Someone famous in Source Title
<blockquote class="blockquote-lg blockquote-primary">
<p>Milk filter lungo as galão roast that crema blue mountain shop turkish.</p>
<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>