BOOTSTRAP 4 LISTS

In HTML, you can create 3 different types of lists:

1. Ordered list - An ordered list is a list of items whose items are marked by different numbering bullets, for example, 1, i, a, A, etc.
2. Unordered list - An unordered list is a list of items whose items are marked are not marked by any numbering system but by a simple bullet point.
3. Description list - A description list is a list of items with a description or definition of each list item.

Unstyled List Using Bootstrap

There are many cases where you need to present a list of items without any bullet marker. Using bootstrap you can do this just by adding .list-unstyled class to either ordered list (<ul>) or unordered list (<ol>).

Example:

Code:

<ul class="list-unstyled">
  <li>Books</li>
  <li>Devices</li>
  <li>Laptop</li>
  <li>Food</li>
  <ul>
    <li>Milk</li>
    <li>Bread</li>
    <li>Tea</li>
  </ul>
  <li>Bike</li>
</ul>

Another example:

Code:

<ul class="list-unstyled">
  <li><i class="fa fa-align-left"></i> Align Left</li>
  <li><i class="fa fa-align-right"></i>Align Right</li>
  <li><i class="fa fa-align-center">Align Center</i></li>
  <ul>
    <li><i class="fa fa-cut"></i> Cut</li>
    <li><i class="fa fa-copy"></i> Copy</li>
    <li><i class="fa fa-paste"></i> Paste</li>
  </ul>
  <li><i class="fa fa-align-justify">Align Justify</i></li>
</ul>

Note: The .list-unstyled class removes style and left-padding of only list items which are its immediate child. You have to add the .list-unstyled class to every nested list.

List Inline Bootstrap 4

By default list-items are block level element, means it cover the full width of its parent. That's why the list item aligns itself in a vertical manner.

To create list items to align inline use bootstrap's .list-inline to <ol> or <ul>, and the .list-inline-item class to its <li> elements.

Example:

Code:

<ul class="list-inline">
  <li class="list-inline-item"><i class="fa fa-align-left"></i> Align Left</li>
  <li class="list-inline-item"><i class="fa fa-align-right"></i>Align Right</li>
  <li class="list-inline-item"><i class="fa fa-align-center">Align Center</i></li>
  <li class="list-inline-item"><i class="fa fa-align-justify">Align Justify</i></li>
</ul>