Typography
These examples for typography, including global settings, headings, body text, lists, and more. When more control is needed, check out the textual utility classes.
Headings
All HTML headings,
<h1> through
<h6>, are
available.
| Heading | Example |
|---|---|
<h1></h1> |
h1. Bootstrap heading |
<h2></h2> |
h2. Bootstrap heading |
<h3></h3> |
h3. Bootstrap heading |
<h4></h4> |
h4. Bootstrap heading |
<h5></h5> |
h5. Bootstrap heading |
<h6></h6> |
h6. Bootstrap heading |
| Class Reference | Note |
|---|---|
<h[num]>,
.h[num]
|
1 | 2 | 3 | 4 | 5 | 6 |
<h4 class="title"> ... </h4> <span class="title h4"> ... </span>
Customizing headings
Use the text utility classes to more customizing the heading text.
Fancy display heading With faded secondary text
<h3 class="ff-base fw-medium"> Fancy display heading <small class="text-soft">With faded secondary text</small> </h3>
Inline Element & Text Style
Change text alignment, transform, style, weight, and color with our text utilities and color utilities.
| Code Reference | Preview |
|---|---|
<mark> |
You can use the mark tag to highlight text. |
<del> |
|
<s> |
|
<ins> |
This line of text is meant to be treated as an addition to the document. |
<u> |
This line of text will render as underlined |
<small> |
This line of text is meant to be treated as fine print. |
<strong> |
This line rendered as bold text. |
<sup> |
This text rendered as superscript |
<sub> |
This text rendered as subscript |
<abbr> |
Abbreviations have a default underline and gain a help cursor |
.lead |
This line of text is meant to lead text to stand out. |
<p>You can use the mark tag to <mark>highlight</mark> text.</p> <p class="lead">This line of text is meant to lead text to stand out.</p>
Blockquotes
For quoting blocks of content from another source
within your document. Use
.blockquote in
<blockquote>.
A well-known quote, contained in a blockquote element.
A well-known quote, contained in a blockquote element.
A well-known quote, contained in a blockquote element.
Code Example
<figure class="text-center">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
Lists - Style
Use .list class with
<ul> element to
style basic listing. Also your can use
.list-checked with
.list class for different style as
below.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
-
Nulla volutpat aliquam velit
- Phasellus iaculis nequeep
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Eget porttitor lorem
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
-
Nulla volutpat aliquam velit
- Phasellus iaculis nequeep
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Eget porttitor lorem
Additionally you can use .list-sm and
.list-lg for displaying small and
large.
Code Example
<ul class="list list-checked">
<li>Lorem ipsum dolor sit amet</li>
<ul>
<li>Phasellus iaculis nequeep</li>
</ul>
</li>
<li>Eget porttitor lorem</li>
</ul>
Lists - Unstyled
Use .list-unstyled class with
<ul> element to
make unstyled
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
-
Nulla volutpat aliquam velit
- Phasellus iaculis nequeep
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Eget porttitor lorem
Code Example
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<ul>
<li>Phasellus iaculis nequeep</li>
</ul>
</li>
<li>Eget porttitor lorem</li>
</ul>
Lists - Inline
Remove a list’s bullets and apply some light
margin with a
combination of two classes,
.list-inline and
.list-inline-item.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
Code Example
<ul class="list-inline"> <li class="list-inline-item">Lorem ipsum</li> <li class="list-inline-item">Phasellus iaculis</li> <li class="list-inline-item">Nulla volutpat</li> </ul>
Description list alignment
Align terms and descriptions horizontally by using our grid system’s predefined classes.
- Description lists
- A description list is perfect for defining terms.
- Euismod
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Truncated term is truncated
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Nesting
-
- Nested definition list
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
Code Example
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Euismod</dt>
<dd class="col-sm-9">
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>
<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
</dl>
</dd>
</dl>
