Browse source code

Introduction Alerts Autosize Avatars Badges Breadcrumb Buttons Cards Carousel Colors Countup Cursors Charts Divider Empty states Flags Form elements Form helpers Form input mask Layout Progress Payments Range slider Ribbons New Spinners Steps Tables Tabs Timelines Toasts Tooltips Typography

Typography

Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.

Headings

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>

Paragraphs

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum.

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum.</p>

Semantic text elements

I18N abbr
Bold strong b
Citation cite
Hello World! code
~~Deleted~~ del
Emphasis em
Italic i
Inserted ins
Ctrl + S kbd
Highlighted mark
~~Strikethrough~~ s
Sample samp
Text _Subscripted sub
Text ^{Superscripted} sup
20:00 time
Underline u
x = y + 2 var

<abbr title="Internationalization">I18N</abbr><hide> <code class="ml-2">abbr</code><br/>
</hide>
<strong>Bold</strong><hide> <code class="ml-2">strong</code> <code>b</code><br/>
</hide>
<cite>Citation</cite><hide> <code class="ml-2">cite</code><br/>
</hide>
<code>Hello World!</code><hide> <code class="ml-2">code</code><br/>
</hide>
<del>Deleted</del><hide> <code class="ml-2">del</code><br/>
</hide>
<em>Emphasis</em><hide> <code class="ml-2">em</code><br/>
</hide>
<i>Italic</i><hide> <code class="ml-2">i</code><br/>
</hide>
<ins>Inserted</ins><hide> <code class="ml-2">ins</code><br/>
</hide>
<kbd>Ctrl + S</kbd><hide> <code class="ml-2">kbd</code><br/>
</hide>
<mark>Highlighted</mark><hide> <code class="ml-2">mark</code><br/>
</hide>
<s>Strikethrough</s<hide>> <code class="ml-2">s</code><br/>
</hide>
<samp>Sample</samp><hide> <code class="ml-2">samp</code><br/>
</hide>
Text <sub>Subscripted</sub><hide> <code class="ml-2">sub</code><br/>
</hide>
Text <sup>Superscripted</sup><hide> <code class="ml-2">sup</code><br/>
</hide>
<time>20:00</time><hide> <code class="ml-2">time</code><br/>
</hide>
<u>Underline</u><hide> <code class="ml-2">u</code><br/>
</hide>
<var>x</var> = <var>y</var> + 2<hide> <code class="ml-2">var</code><br/>
</hide>

Horizontal rules

<hr>

Horizontal rules with label

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Rule text

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Rule text

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Rule text

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

<p>
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
<div class="hr-text">
   <span>Rule text</span>
</div>
<p>
   At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<div class="hr-text hr-text-center">
   <span>Rule text</span>
</div>
<p>
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
<div class="hr-text hr-text-right">
   <span>Rule text</span>
</div>
<p>
   At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

Optimized for Asian, African, and Middle Eastern alphabets

Chinese

汉字

Japanese

日本語の表記体系

Korean

한글

Cyrillic

Кириллица

Greek

Eλληνική

Georgian

ქართული დამწერლობა

Armenian

Հայերենի այբուբեն

Arabic

الحروف العربية

Hebrew

אלפבית עברי

Thai

อักษรไทย

<h5>Chinese</h5>
<p>汉字</p>
<h5>Japanese</h5>
<p>日本語の表記体系</p>
<h5>Korean</h5>
<p>한글</p>
<h5>Cyrillic</h5>
<p>Кириллица</p>
<h5>Greek</h5>
<p>Eλληνική</p>
<h5>Georgian</h5>
<p>ქართული დამწერლობა</p>
<h5>Armenian</h5>
<p>Հայերենի այբուբեն</p>
<h5>Arabic</h5>
<p>الحروف العربية</p>
<h5>Hebrew</h5>
<p>אלפבית עברי</p>
<h5>Thai</h5>
<p>อักษรไทย</p>

Text transform

Transform text in components with text capitalization classes.

Lowercased text.

Uppercased text.

Capitalized text.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Letter spacing

Utilities for controlling the tracking (letter spacing) of an element.

Lorem ipsum dolor sit amet. Tight letter spacing.

Lorem ipsum dolor sit amet. Normal letter spacing.

Lorem ipsum dolor sit amet. Wide letter spacing.

<p class="tracking-tight">Lorem ipsum dolor sit amet. Tight letter spacing.</p>
<p class="tracking-normal">Lorem ipsum dolor sit amet. Normal letter spacing.</p>
<p class="tracking-wide">Lorem ipsum dolor sit amet. Wide letter spacing.</p>

Line Height

Utilities for controlling the leading (line height) of an element.

Lorem ipsum dolor sit amet.
Dolor sit amet.

<p class="lh-1">Lorem ipsum dolor sit amet.<br>
   Dolor sit amet.</p>
<p class="lh-sm">Lorem ipsum dolor sit amet.<br>
   Dolor sit amet.</p>
<p class="lh-base">Lorem ipsum dolor sit amet.<br>
   Dolor sit amet.</p>
<p class="lh-lg">Lorem ipsum dolor sit amet.<br>
   Dolor sit amet.</p>

Antialiasing

Utilities for controlling the font smoothing of an element.

Use the .antialiased utility to render text using subpixel antialiasing or use the .subpixel-antialiased render without antialiasing.

Text with antialiasing

Text without antialiasing

<div class="antialiased">Text with antialiasing</div>
<div class="subpixel-antialiased">Text without antialiasing</div>

Markdown elements

When you can’t use the CSS classes you want, or when you just want to directly use HTML tags, use .markdown as container. It can handle almost any HTML tag.

Hello World

Lorem ipsum^[1] dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub_script works as well!

Second level

Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.

In fermentum leo eu lectus mollis, quis dictum mi aliquet.
Morbi eu nulla lobortis, lobortis est in, fringilla felis.
Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
Ut non enim metus.

<div class="markdown">
   <h1>Hello World</h1>
   <p>Lorem ipsum<sup><a>[1]</a></sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub>script</sub> works as well!</p>
   <h2>Second level</h2>
   <p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
   <ul>
      <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
      <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
      <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
      <li>Ut non enim metus.</li>
   </ul>
</div>