Typography
Please follow this link to view all bootstrap 4 framework classes
Headings
H1 Heading.
H2 Heading.
H3 Heading.
H4 Heading.
H5 Heading.
H6 Heading.
Colors
.text-primary
.text-secondary
.text-success
.text-info
.text-warning
.text-danger
.text-third
.text-fourth
.text-fifth
.text-light
.text-dark
Gray Colors
.text-gray-100
.text-gray-200
.text-gray-300
.text-gray-400
.text-gray-500
.text-gray-600
.text-gray-700
.text-gray-800
.text-gray-900
Other Classes
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">....</p>
You can use the mark tag to highlight text.
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
This line of text is meant to be treated as deleted text.
<p><del>This line of text is meant to be treated as deleted text.</del></p>
This line of text is meant to be treated as no longer accurate.
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
This line of text is meant to be treated as an addition to the document.
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
This line of text will render as underlined
<p><u>This line of text will render as underlined</u></p>
This line of text is meant to be treated as fine print.
<p><small>This line of text is meant to be treated as fine print.</small></p>
This line rendered as bold text.
<p><strong>This line rendered as bold text.</strong></p>
This line rendered as italicized text.
<p><em>This line rendered as italicized text.</em></p>
y = mx + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
attr
<p><abbr title="attribute">attr</abbr></p>
HTML
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
Text line Class
<p class="text-line">Text line Class</p>
Display headings
.display-1
.display-2
.display-3
.display-4
Custom Font Size
.text-xl
.text-lg
.text-md
.text-sm
Underline
<p class="underline">...</p>
Lorem ipsum
<p class="underline underline-primary">...</p>
Lorem ipsum
<p class="underline underline-secondary">...</p>
Lorem ipsum
<p class="underline underline-success">...</p>
Lorem ipsum
<p class="underline underline-info">...</p>
Lorem ipsum
<p class="underline underline-warning">...</p>
Lorem ipsum
<p class="underline underline-danger">...</p>
Lorem ipsum
<p class="underline underline-primary">...</p>
Lorem ipsum
<p class="underline underline-center">...</p>
Lorem ipsum
<p class="underline underline-right">...</p>
Lorem ipsum
<p class="underline underline-1">...</p>
Lorem ipsum
<p class="underline underline-2">...</p>
Lorem ipsum
<p class="underline underline-3">...</p>
Lorem ipsum
<p class="underline underline-sm">...</p>
Lorem ipsum
<p class="underline underline-lg">...</p>
Lorem ipsum
Blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote class="blockquote">
<p class="mb-0">
...
</p>
<footer class="blockquote-footer">... <cite title="...">...</cite>
</footer>
</blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote class="blockquote text-center">
<p class="mb-0">
...
</p>
<footer class="blockquote-footer">... <cite title="...">...</cite>
</footer>
</blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote class="blockquote text-right">
<p class="mb-0">
...
</p>
<footer class="blockquote-footer">... <cite title="...">...</cite>
</footer>
</blockquote>
Font Weight
.fw-100
.fw-200
.fw-300
.fw-400
.fw-500
.fw-600
.fw-700
.fw-800
.fw-900
Praeterea iter est quasdam res quas ex Praeterea iter est quasdam res quas ex communi
<p class="text-truncate">...</p>
Lowercased text.
<p class="text-lowercase">...</p>
Uppercased text.
<p class="text-uppercase">...</p>
CapiTaliZed text.
<p class="text-capitalize">...</p>
Text Align
.text-left
.text-sm-left
.text-md-left
.text-lg-left
.text-xl-left
.text-center
.text-sm-center
.text-md-center
.text-lg-center
.text-xl-center
.text-right
.text-sm-right
.text-md-right
.text-lg-right
.text-xl-right
Badges
Example New
<h1>Example <span class="badge badge-secondary">New</span></h1>
Example New
<h2>Example <span class="badge badge-secondary">New</span></h2>
Example New
<h3>Example <span class="badge badge-secondary">New</span></h3>
Example New
<h4>Example <span class="badge badge-secondary">New</span></h4>
Example New
<h5>Example <span class="badge badge-secondary">New</span></h5>
Example New
<h6>Example <span class="badge badge-secondary">New</span></h6>
<button class="btn btn-primary"> Notifications <span class="badge badge-secondary">4</span> </button>
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>
Text Lines
<div class="text-bold-line">
<span> ... </span>
</div>
<div class="text-bold-line line-primary">
<span> ... </span>
</div>
<div class="text-bold-line line-secondary">
<span> ... </span>
</div>
<div class="text-bold-line line-success">
<span> ... </span>
</div>
<div class="text-bold-line line-info">
<span> ... </span>
</div>
<div class="text-bold-line line-warning">
<span> ... </span>
</div>
<div class="text-bold-line line-danger">
<span> ... </span>
</div>
<div class="text-bold-line line-light">
<span> ... </span>
</div>
<div class="text-bold-line line-third">
<span> ... </span>
</div>
<div class="text-bold-line line-fourth">
<span> ... </span>
</div>
<div class="text-bold-line line-fifth">
<span> ... </span>
</div>
