Bootstrap 4 comes with two types of list utility class. The first type allows for creating unstyled lists, while the second type allows for the creation of inline lists. Let’s look at each type individually.
1. Unstyled lists
The list style can be changed using the list helper classes. An example of where unstyled lists are used in Bootstrap is the pagination and list-inline classes.
To create an unstyled list, apply the list-unstyled class to any ul or ol element. Bootstrap defines the class as follows:
<ul class=”list-unstyledM>
<li>My first unstyled item</li>
<li>My second unstyled item</li>
<li>My third unstyled item</li>
</ul>
<ul>
<li>My first styled item</li>
<li>My second styled item</li>
<li>My third styled item</li>
</ul>
Figure 8.9: Contrasting unstyled lists created using the list-unstyled class with normal, styled lists
2. Inline lists
In some cases, one might need to create lists whose items are displayed inline. By applying the list-inline class to any ul or ol element and applying the list-inline-item class to its li child elements, the list will render inline as the list-inline class sets the list-style to none, and the list-inline-item sets the display property for the li elements to inline-block:
<ul class=”list-inline”>
<li class=”list-inline-item”>My first inline item</li>
<li class=”list-inline-item”>My second inline item</li>
<li class=”list-inline-item”>My third inline item</li>
</ul>
<ul>
<li>My first item</li>
<li>My second item</li>
<li>My third item</li>
</ul>
Figure 8.10: Contrasting inline lists created using the list-inline class with normal lists
Source: Jakobus Benjamin, Marah Jason (2018), Mastering Bootstrap 4: Master the latest version of Bootstrap 4 to build highly customized responsive web apps, Packt Publishing; 2nd Revised edition.