Bootstrap Lists

Bootstrap Lists 3 different types of lists in HTML and each one has a specific purpose and meaning.

1. Unordered lists
2. Ordered lists
3. Definition lists

1. Unordered lists:

Unordered lists used to create a list of related items, in no particular order ( Bullet Points).

Example:

<div class="container">
  <h2 class="mb-3"> Unordered List</h2>
  <ul class="list-unstyled">
       <ul>
         <li>Unordered1</li>
         <li>Unordered2</li>
        <li>Unordered3</li>
        <li>Unordered4</li>
       </ul>
  </ul> 
</div>

OUTPUT:

2.Ordered lists:

The Ordered list used to create a list of related items, in a specific order (Number).

Example:

<div class="container">
  <h2 class="mb-3"> Ordered List</h2>
  <ol class="list-unstyled">
   <ol>
       <li>Ordered1</li>
       <li>Ordered2</li>
      <li>Ordered3</li>
      <li>Ordered4</li>
   </ol>      
  </ol>
</div>

OUTPUT:

3.Definition lists:

Definition list (Description lists) used to create a list of terms and their description.

Example:

<dl> 
 <dt>definition </dt> 
 <dd>  used to create a list of terms and their description.
</dd> 
 <dt>definition 1</dt> 
 <dd>used to create a list of terms and their description.</dd> 
</dl>

OUTPUT:

Horizontal Definition Lists:

The terms and their descriptions in a definition list can also be aligned horizontally using the Bootstrap grid system’s predefined classes.

Example:

<div class="container">
  <h2 class="mb-3">Horizontal Definition Lists</h2>
  <dl class="row">
    <dt class="col-sm-3">User1</dt>
    <dd class="col-sm-9">Horizontal Definition Lists</dd>
    <dt class="col-sm-3">User2</dt>
    <dd class="col-sm-9">Horizontal Definition Lists</dd>
    <dt class="col-sm-3">User3</dt>
    <dd class="col-sm-9">Horizontal Definition Lists</dd>
  </dl>
</div>

OUTPUT:

Inline Unordered List:

.list-inline class to the respective <ul> or <ol>, and the class .list-inline-item to the <li> elements.

Example:

<div class="container">
  <h2 class="mb-3">Inline Unordered List</h2>
  <ul class="list-inline">
    <li class="list-inline-item">List</li>
    <li class="list-inline-item">List1</li>
    <li class="list-inline-item">List2</li>
    <li class="list-inline-item">List3</li>
  </ul>
</div>

OUTPUT: