Lists

Unordered List

  • List item
  • List item
    • Sub List item
    • Sub List item
    • Sub List item
  • List item
  • List item

<ul>
  <li>List item</li>
  <li>List item
    <ul>
      <li>Sub List item</li>
      <li>Sub List item</li>
      <li>Sub List item</li>
    </ul>
  </li>
  <li>List item</li>
  <li>List item</li>
</ul>

Ordered List

  1. List item
  2. List item
  3. List item
  4. List item

<ol>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ol>

Ordered List - Style 2

  1. List item
  2. List item
  3. List item
  4. List item

<ol class="list-ordered style-2">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ol>

Ordered List - Style 3

  1. List item
  2. List item
  3. List item
  4. List item

<ol class="list-ordered style-3">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ol>

Ordered List - Style 4

  1. List item
  2. List item
  3. List item
  4. List item

<ol class="list-ordered style-4">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ol>

Ordered List - Style 5

  1. List item
  2. List item
  3. List item
  4. List item

<ol class="list-ordered style-5">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ol>

Unstyled List

  • List item
  • List item
    • Sub List item
    • Sub List item
    • Sub List item
  • List item
  • List item

<ul class="list-unstyled">
  <li>List item</li>
  <li>List item
    <ul>
      <li>Sub List item</li>
      <li>Sub List item</li>
      <li>Sub List item</li>
    </ul>
  </li>
  <li>List item</li>
  <li>List item</li>
</ul>

Dash List

  • List item
  • List item
  • List item
  • List item

<ul class="list-dash">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

Inline List

  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item

<ul class="list-inline-lg">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>
<ul class="list-inline">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>
<ul class="list-inline-sm">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

Inline List - Dash

  • List item
  • List item
  • List item
  • List item

<ul class="list-inline-dash">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

Inline List - Slash

  • List item
  • List item
  • List item
  • List item

<ul class="list-inline-slash">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

Icon List

  • List item
  • List item
  • List item
  • List item

<ul class="list-unstyled">
  <li><i class="bi bi-check pe-2"></i>List item</li>
  <li><i class="bi bi-check pe-2"></i>List item</li>
  <li><i class="bi bi-check pe-2"></i>List item</li>
  <li><i class="bi bi-check pe-2"></i>List item</li>
</ul>