Typography
These examples for typography, including global settings, headings, body text, lists, and more.
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>
