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.