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 lists and images with Bootstrap 5.

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>Nulla volutpat aliquam velit  
    <ul>  
      <li>Phasellus iaculis neque</li>  
      <li> Suspendisse potenti. Aliquam erat volutpat.</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.

Inline

We can remove a list’s bullets and apply some light margin with the combination of the .list-inline and .list-inline-item classes:

<ul class="list-inline">  
  <li class="list-inline-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>  
  <li class="list-inline-item">Pellentesque quis nunc ultricies enim ullamcorper pretium at cursus tellus.</li>  
  <li class="list-inline-item"> Ut convallis quis lacus in volutpat. Pellentesque volutpat dui et enim mattis</li>  
</ul>

We add the classes to make the items display inline with margins.

Description List Alignment

To make a list with description, we can use the dl , dt , and dd tags with the width styles.

For example, we can write:

<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>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>  
    <p>ellentesque quis nunc ultricies enim ullamcorper pretium at cursus tellus. Curabitur sit amet leo arcu. Integer vitae tincidunt odio. Duis id nunc dignissim.</p>  
  </dd>  
  
  <dt class="col-sm-3">Maecenas imperdiet sapien augue, ac malesuada metus ultrices et.</dt>  
  <dd class="col-sm-9">Aliquam erat volutpat. Quisque rutrum commodo felis imperdiet fermentum. Integer hendrerit dictum augue dapibus semper. In ac nisi consectetur.</dd>  
  
  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>  
  <dd class="col-sm-9">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</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 dolor augue, vulputate non mattis eu, lacinia viverra ex.</dd>  
    </dl>  
  </dd>  
</dl>

We have the list with the dt and dd tags with the column classes to set the width of them.

Images

We can add responsive images with the img element and the .img-fluid class.

For example, we can write:

<img src="http://placekitten.com/200/200" class="img-fluid" alt="cat">

Image Thumbnails

To add thumbnails, we use the .img-thumbnail class:

<img src="http://placekitten.com/200/200" class="img-thumbnail" alt="cat">

Aligning Images

We can align images with the float-left or float-right classes:

<img src="http://placekitten.com/200/200" class="rounded float-left" alt="cat">  
<img src="http://placekitten.com/200/200" class="rounded float-right" alt="cat">

To make it aligned centered horizontally, we can write:

<img src="http://placekitten.com/200/200" class="rounded mx-auto d-block" alt="cat">

We used the mx-auto class to make the image centered.

Also, we can use the text-center class to do the same thing:

<div class="text-center">  
  <img src="http://placekitten.com/200/200" class="rounded" alt="cat">  
</div>

Picture

The picture element can be used to specify multiple sources of images.

So we can write:

​<picture>  
  <img src="http://placekitten.com/200/200" class="img-fluid img-thumbnail" alt="cat 1">  
  <img src="http://placekitten.com/201/201" class="img-fluid img-thumbnail" alt="cat 2">  
</picture>

We put the img elements in the picture tags.

And we’ve to add the img-* classes ion the img tag rather than the picture tag.

Conclusion

We can style lists and images with Bootstrap 5.

It comes with the classes for us to do so.

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 tables with Bootstrap 5.

Tables

Bootstrap table styles are opt-in because of the widespread of use of tables in other UI components.

The table styles aren’t inherited in Bootstrap.

So nested tables can be styles independently of the parent.

For example, we can use the table class to style tables.

We can create a simple table by writing:

<table class="table">  
  <thead>  
    <tr>  
      <th scope="col">#</th>  
      <th scope="col">First</th>  
      <th scope="col">Last</th>  
      <th scope="col">Age</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <th scope="row">1</th>  
      <td>james</td>  
      <td>smith</td>  
      <td>20</td>  
    </tr>  
    <tr>  
      <th scope="row">2</th>  
      <td>mary</td>  
      <td>jones</td>  
      <td>20</td>  
    </tr>  
    <tr>  
      <th scope="row">3</th>  
      <td colspan="2">Larry</td>  
      <td>50</td>  
    </tr>  
  </tbody>  
</table>

Variants

There are many styling variants for a table.

We can style them with the following classes:

<table class="table-primary">...</table>  
<table class="table-secondary">...</table>  
<table class="table-success">...</table>  
<table class="table-danger">...</table>  
<table class="table-warning">...</table>  
<table class="table-info">...</table>  
<table class="table-light">...</table>  
<table class="table-dark">...</table>

They also work on rows:

<tr class="table-primary">...</tr>  
<tr class="table-secondary">...</tr>  
<tr class="table-success">...</tr>  
<tr class="table-danger">...</tr>  
<tr class="table-warning">...</tr>  
<tr class="table-info">...</tr>  
<tr class="table-light">...</tr>  
<tr class="table-dark">...</tr>

And they also work on table cells:

<tr>  
  <td class="table-primary">...</td>  
  <td class="table-secondary">...</td>  
  <td class="table-success">...</td>  
  <td class="table-danger">...</td>  
  <td class="table-warning">...</td>  
  <td class="table-info">...</td>  
  <td class="table-light">...</td>  
  <td class="table-dark">...</td>  
</tr>

Accented Tables

We can add the .table-striped class to add zebra striping to table rows within the tbody .

For example, we can write:

<table class="table table-striped">  
  <thead>  
    <tr>  
      <th scope="col">#</th>  
      <th scope="col">First</th>  
      <th scope="col">Last</th>  
      <th scope="col">Age</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <th scope="row">1</th>  
      <td>james</td>  
      <td>smith</td>  
      <td>20</td>  
    </tr>  
    <tr>  
      <th scope="row">2</th>  
      <td>mary</td>  
      <td>jones</td>  
      <td>20</td>  
    </tr>  
    <tr>  
      <th scope="row">3</th>  
      <td colspan="2">Larry</td>  
      <td>50</td>  
    </tr>  
  </tbody>  
</table>

Stripes also work with other table variants:

<table class="table table-dark table-striped">  
  <thead>  
    <tr>  
      <th scope="col">#</th>  
      <th scope="col">First</th>  
      <th scope="col">Last</th>  
      <th scope="col">Age</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <th scope="row">1</th>  
      <td>james</td>  
      <td>smith</td>  
      <td>20</td>  
    </tr>  
    <tr>  
      <th scope="row">2</th>  
      <td>mary</td>  
      <td>jones</td>  
      <td>20</td>  
    </tr>  
    <tr>  
      <th scope="row">3</th>  
      <td colspan="2">Larry</td>  
      <td>50</td>  
    </tr>  
  </tbody>  
</table>

Hoverable Rows

To make rows hoverable, we can add the table-hover class:

<table class="table table-hover">  
  <thead>  
    <tr>  
      <th scope="col">#</th>  
      <th scope="col">First</th>  
      <th scope="col">Last</th>  
      <th scope="col">Age</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <th scope="row">1</th>  
      <td>james</td>  
      <td>smith</td>  
      <td>20</td>  
    </tr>  
    <tr>  
      <th scope="row">2</th>  
      <td>mary</td>  
      <td>jones</td>  
      <td>20</td>  
    </tr>  
    <tr>  
      <th scope="row">3</th>  
      <td colspan="2">Larry</td>  
      <td>50</td>  
    </tr>  
  </tbody>  
</table>

Now we see the row that we hovered on highlighted.

The hover effect can be combined with stripes:

<table class="table table-striped table-hover">  
  <thead>  
    <tr>  
      <th scope="col">#</th>  
      <th scope="col">First</th>  
      <th scope="col">Last</th>  
      <th scope="col">Age</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <th scope="row">1</th>  
      <td>james</td>  
      <td>smith</td>  
      <td>20</td>  
    </tr>  
    <tr>  
      <th scope="row">2</th>  
      <td>mary</td>  
      <td>jones</td>  
      <td>20</td>  
    </tr>  
    <tr>  
      <th scope="row">3</th>  
      <td colspan="2">Larry</td>  
      <td>50</td>  
    </tr>  
  </tbody>  
</table>

Active Tables

We can highlight a table row or cell with the table-active class:

<table class="table">  
  <thead>  
    <tr>  
      <th scope="col">#</th>  
      <th scope="col">First</th>  
      <th scope="col">Last</th>  
      <th scope="col">Age</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <th scope="row">1</th>  
      <td class="table-active">james</td>  
      <td>smith</td>  
      <td>20</td>  
    </tr>  
    <tr>  
      <th scope="row">2</th>  
      <td>mary</td>  
      <td>jones</td>  
      <td>20</td>  
    </tr>  
    <tr>  
      <th scope="row">3</th>  
      <td colspan="2">Larry</td>  
      <td>50</td>  
    </tr>  
  </tbody>  
</table>

We add the table-active class on the cell so it’ll be highlighted.

This also works with other variants:

<table class="table table-success">  
  <thead>  
    <tr>  
      <th scope="col">#</th>  
      <th scope="col">First</th>  
      <th scope="col">Last</th>  
      <th scope="col">Age</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <th scope="row">1</th>  
      <td class="table-active">james</td>  
      <td>smith</td>  
      <td>20</td>  
    </tr>  
    <tr>  
      <th scope="row">2</th>  
      <td>mary</td>  
      <td>jones</td>  
      <td>20</td>  
    </tr>  
    <tr>  
      <th scope="row">3</th>  
      <td colspan="2">Larry</td>  
      <td>50</td>  
    </tr>  
  </tbody>  
</table>

The styling works by setting the background with the --bs-table-bg property.

Then the gradient on the table is added with the background-image: linear-gradient(var( — bs-table-accent-bg), var( — bs-table-accent-bg)); CSS property.

When .table-striped , .table-hover or .table-active classes are added, the --bs-table-accent-bg is set to semitransparent color to change the color of the background.

--bs-table-accent-bg color with the highest contrast is generated for the highlights.

Text and border colors are generated the same way.

Table Borders

We can add borders with the table-bordered class:

<table class="table table-bordered">  
  <thead>  
    <tr>  
      <th scope="col">#</th>  
      <th scope="col">First</th>  
      <th scope="col">Last</th>  
      <th scope="col">Age</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <th scope="row">1</th>  
      <td>james</td>  
      <td>smith</td>  
      <td>20</td>  
    </tr>  
    <tr>  
      <th scope="row">2</th>  
      <td>mary</td>  
      <td>jones</td>  
      <td>20</td>  
    </tr>  
    <tr>  
      <th scope="row">3</th>  
      <td colspan="2">Larry</td>  
      <td>50</td>  
    </tr>  
  </tbody>  
</table>

Conclusion

We can add tables with various effects like stripes, hover, and various colors.

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 vertically align content and best practices with resets with Bootstrap 5.

Vertical Alignment

We can vertically align content with various classes.

To do that, we can apply one of the .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, and .align-text-top classes.

Then we can write:

<span class="align-baseline">baseline</span>  
<span class="align-top">top</span>  
<span class="align-middle">middle</span>  
<span class="align-bottom">bottom</span>  
<span class="align-text-top">text-top</span>  
<span class="align-text-bottom">text-bottom</span>

We can align items with all these classes.

align-baseline aligns them to the baseline, which is the middle.

align-top aligns content to the top.

align-middle aligns things to the middle.

align-bottom aligns content to the bottom.

align-text-top aligns text to the top.

align-text-bottom aligns text to the bottom.

These classes can also be used within table cells.

For example, we can write:

<table style="height: 100px;">  
  <tbody>  
    <tr>  
      <td class="align-baseline">baseline</td>  
      <td class="align-top">top</td>  
      <td class="align-middle">middle</td>  
      <td class="align-bottom">bottom</td>  
      <td class="align-text-top">text-top</td>  
      <td class="align-text-bottom">text-bottom</td>  
    </tr>  
  </tbody>  
</table>

Then we get different results.

align-baseline works the same as align-top .

And align-text-top and align-text-bottom work the same way.

Visibility

Bootstrap 5 provides classes for controlling the visibility of content without modifying the display of elements.

We can use the visible class to make things visible and invisible to make things invisible.

For example, we can write:

<div class="visible">...</div>  
<div class="invisible">...</div>

Then the first div is visible and the 2nd one isn’t.

Reboot

Reboot provides a set of baseline CSS we can build our styles upon.

It’s built upon Normalize, which gives us many HTML elements with opinionated styles using only element selectors.

Additional styling is done with only classes.

It changes some browser defaults to use rems instead of em s for scalable component spacing.

margin-top is avoided. Vertical margins can collapse making results unexpected.

Single direction for margin is simpler.

rem s are used instead of margin s for easier scaling.

It also keeps declaration of font- related properties to a minimum and use inherit whenever possible.

Page Defaults

box-sizing is globally set on every element.

This ensures that the declared width of an element is never exceeded because of padding or border,

No base font-size is declared for the html element.

However, 16px is assumed.

This can be overridden with the $font-size-root variable.

body also see a global font-family , font-wwight , line-height and color.

body has a background-color set to #fff .

Native Font Stack

Bootstrap 5 sets the fonts to a given style.

It’s set with the following code:

$font-family-sans-serif:  
  -apple-system,  
  BlinkMacSystemFont,  
  "Segoe UI",  
  Roboto,  
  "Helvetica Neue", Arial,  
  "Noto Sans",  
  sans-serif,  
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

We have fonts for all popular platforms like macOS and iOS, Windows, Android, Linux and emoji fonts.

Helvetica Neue and Arial are the default font if nothing else is available.

Headings and Paragraphs

Bootstrap 5 provides it own styles for headings and paragraphs.

They have margin-top removed and margin-bottom set to .5rem for headings and 1rem for paragraphs.

Lists

All lists have their margin-top removed and margin-bottom set to 1rem.

Nested lists have no margin-bottom . padding-left is reset for ul and ol elements.

dd have margin-left set to 0 and margin-bottom set to .5rem .

dt s are bolded.

Inline Code

If we wrap snippets of cod with code tags, then we need to escape HTML angle brackets.

Code Blocks

We can use pre s for multiple lines of code.

Bootstrap removes the margin-top for pre elements and use rem for margin-bottom .

Variables

If we use Bootstrap 5, then variables should be written inside var tags.

For example, we can write:

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

User Input

kbd indicates input that’s typically entered with a keyboard.

For example, we can write;

<kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

to add keyboard keys instructions.

Conclusion

Bootstrap provides us with a CSS baseline that we can build on.

Content can be aligned with various classes.

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 best practices for working resets provided by Bootstrap 5 and style text.

Sample Output

To display sample output, we can use the samp tag.

For example, we can write:

<samp>computer output</samp>

The samp tag is used for display text outputted by a computer.

Tables

Bootstrap 5 adjusted the table styles for its caption, collapse borders, and ensured consistent text-align throughout.

The .table class has more formatting changes.

Forms

Boostrap makes many adjustment to forms.

fieldset s have no borders, padding, or margin so they can be used easily as wrappers for individual inputs and groups of inputs.

legends have also been restyled to be displayed as headings.

label s are set to display: inline-block to allow margins to be applied.

input s, select s, textarea a and button s are mostly reset by Normalize.

Reboot removes their margin and sets line-height to inherit .

textarea s are modified to only be resiazble vertically since horizontal resizing breaks page layouts often.

button s and input button elements have cursor: pointer when it’s not disabled.

Pointers on Buttons

Pointer changes are applied to buttons.

It’s done on a button element automatically and also applied to anything with role='button' added.

Address Elements

address is updated to rest the browser default font-style from italic to normal.

line-height is now inherited.

margin-bottom: 1rem is added.

address elements are for presenting contact information for the nearest ancestor.

Formatting can be preserved with br elements.

Blockquote

Blockquotes have their default margin set to 0 0 1rem to make them more consistent with other elements.

Inline Elements

The abbr element receives basic styling to make it stand out amongst paragraph text.

Summary

The summary element has cursor set to pointer to convert that the element can be interactive with when we click on it.

HTML5 [hidden] Attribute

The hidden attribute is set to display: none important to help prevent display from getting accidentally overridden.

Typography

Bootstrap 5 provides us with a set of styles for typography.

It uses a native font stack that selects the best font-family for the OS and device that the page is displayed in.

The browser default root font-size is assumed, which is typically 16px.

It uses the $font-family-base , $font-size-base , and $line-height-base attributes as the typographic base applied to the body .

Bootstrap 5 also sets the global link color with the $link-color variable and apply link underlines only when we hover.

The $body-bg is set to a background-color on the body to #fff .

Headings

Styles are applied to all heading tags from h1 to h6.

There’re also the .h1 to .h6 classes.

We can either write:

<h1>h1 heading</h1>  
<h2>h2 heading</h2>  
<h3>h3 heading</h3>  
<h4>h4 heading</h4>  
<h5>h5 heading</h5>  
<h6>h6 heading</h6>

or:

<p class="h1">h1heading</p>  
<p class="h2">h2 heading</p>  
<p class="h3">h3 heading</p>  
<p class="h4">h4 heading</p>  
<p class="h5">h5 heading</p>  
<p class="h6">h6 heading</p>

Customizing Headings

We can customize headings with utility classes top recreate small secondary headings text from Bootstrap 3.

For example, we can use the text-muted class to change make lighter color text:

<h3>  
  <small class="text-muted">faded text</small>  
</h3>

Display Headings

Bootstrap 5 provides display heading classes, which are bigger than regular headings.

For example, we can write:

<h1 class="display-1">Display 1</h1>  
<h1 class="display-2">Display 2</h1>  
<h1 class="display-3">Display 3</h1>  
<h1 class="display-4">Display 4</h1>  
<h1 class="display-5">Display 5</h1>  
<h1 class="display-6">Display 6</h1>

to add them.

The classes all start with display- .

Lead

We can make paragraphs stand out with the .lead class.

For example, we can write:

<p class="lead">  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec mi auctor, blandit nisi ac, venenatis erat. Proin aliquam auctor ipsum eu congue. Mauris consequat dolor id posuere posuere. Curabitur in blandit eros. Donec at dui turpis. Curabitur faucibus est enim, quis facilisis enim ultrices a. Vivamus sed tellus tortor. Fusce malesuada ante dui. Morbi dignissim sapien eu mattis facilisis. Nunc vel enim nec risus rhoncus mollis at accumsan diam. Aliquam sed volutpat turpis.  
</p>

to add special styles to our text.

Conclusion

We can build our own styles on top of Bootstrap 5’s default styles.

Also, we can style text in many ways.

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!