Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to style text with Bootstrap 5.

Inline Text Elements

Bootstrap 5 provides styles for inline text elements.

For example, we can write:

<p><mark>highlight</mark></p><p><del>deleted text.</del></p><p><s>strikethrough</s></p><p><ins>This line of text is meant to be treated as an addition to the document.</ins></p><p><u>underlined</u></p><p><small>fine print.</small></p><p><strong>bold text.</strong></p><p><em>italicized text.</em></p>

mark is for marked or highlighted text.

small is for side comments and small print.

s represent elements that are no longer relevant.

u is for underlined text.

Bootstrap also provides some class equivalents for theses tags.

.mark has the same style as mark .

.small has the same style as small .

.text-decoration-underline has the same style as u .

.text-decoration-line-through has the same style as s .

Abbreviations

abbr elements are for holding abbreviations.

The expanded version is shown on hover.

For example, we can write:

<p><abbr title="attribute">attr</abbr></p>

The title attribute’s value will be displayed on hover.

We can add the .intialism class for smaller font size.

We can write:

<p><abbr title="Extensible Markup Language" class="initialism">XML</abbr></p>

to get that.

Blockquotes

We can use the blockquote element to add blockquotes.

Also, we can use the blockquote class to wrap around HTML as quotes.

For example, we can write:

<blockquote class="blockquote">  
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nunc ultricies enim ullamcorper pretium at cursus tellus. Curabitur sit amet leo arcu. Integer vitae tincidunt odio. Duis id nunc dignissim, fringilla lacus ut, rutrum ligula. Morbi euismod accumsan augue, sit amet finibus ipsum ultrices ac. Ut convallis quis lacus in volutpat. Pellentesque volutpat dui et enim mattis, egestas posuere nisl maximus. Aenean commodo laoreet enim, sit amet tincidunt nisl porttitor non. Ut vestibulum mauris urna, eget consectetur tellus maximus at. Suspendisse pharetra ut erat sed euismod.</p>  
</blockquote>

to do that.

Naming a Source

We can add the figcaption element below our quote to add the source.

And we can add the .blockquote-footer class to that to style. it.

We also need the cite tag to add the source title.

For instance, we can write:

<figure>  
  <blockquote class="blockquote">  
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nunc ultricies enim ullamcorper pretium at cursus tellus. Curabitur sit amet leo arcu. Integer vitae tincidunt odio. Duis id nunc dignissim, fringilla lacus ut, rutrum ligula. Morbi euismod accumsan augue, sit amet finibus ipsum ultrices ac. Ut convallis quis lacus in volutpat. Pellentesque volutpat dui et enim mattis, egestas posuere nisl maximus. Aenean commodo laoreet enim, sit amet tincidunt nisl porttitor non. Ut vestibulum mauris urna, eget consectetur tellus maximus at. Suspendisse pharetra ut erat sed euismod.</p>  
  </blockquote>  
  <figcaption class="blockquote-footer">  
    Someone famous in <cite title="Source Title">Source Title</cite>  
  </figcaption>  
</figure>

Alignment

We can change the alignment of the blockquote text with text utilities.

For instance, we can write:

<figure class="text-center">  
  <blockquote class="blockquote">  
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nunc ultricies enim ullamcorper pretium at cursus tellus. Curabitur sit amet leo arcu. Integer vitae tincidunt odio. Duis id nunc dignissim, fringilla lacus ut, rutrum ligula. Morbi euismod accumsan augue, sit amet finibus ipsum ultrices ac. Ut convallis quis lacus in volutpat. Pellentesque volutpat dui et enim mattis, egestas posuere nisl maximus. Aenean commodo laoreet enim, sit amet tincidunt nisl porttitor non. Ut vestibulum mauris urna, eget consectetur tellus maximus at. Suspendisse pharetra ut erat sed euismod.</p>  
  </blockquote>  
  <figcaption class="blockquote-footer">  
    Someone famous in <cite title="Source Title">Source Title</cite>  
  </figcaption>  
</figure>

to center the text.

Lists

Bootstrap 5 removes the default list-style and left margin of list items.

This only applies to immediate children list items.

The class has to be added to nested lists.

For example, we can wire:

<ul class="list-unstyled">  
  <li>Lorem ipsum dolor sit amet</li>  
  <li>Duis id nunc dignissim</li>  
  <li>Ut vestibulum mauris urna, eget consectetur tellus</li>  
  <li>Facilisis in pretium nisl aliquet</li>  
  <li>Nulla volutpat aliquam velit  
    <ul>  
      <li>Phasellus iaculis neque</li>  
      <li> Suspendisse potenti. Aliquam erat volutpat.</li>  
      <li>Vestibulum laoreet porttitor sem</li>  
      <li>Ac tristique libero volutpat at</li>  
    </ul>  
  </li>  
  <li>Pellentesque habitant morbi tristique senectus</li>  
  <li>Aenean sit amet erat nunc</li>  
  <li>Eget porttitor lorem</li>  
</ul>

to add a nested list.

We added the list-unstyled class to add an unstyled list.

Conclusion

We can use Bootstrap 5’s text and list styles in our app.

JavaScript In Plain English

Enjoyed this article? If so, get more similar content by subscribing to our YouTube channel!