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>

Inline List - Vertical Bar

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

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

Icon List - Check

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

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

Icon List - Close

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

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

Icon List - Plus

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

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

Icon List - Arrow

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

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

Icon List - Caret

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

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

Icon List - Circle Check

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

<ul class="list-icon list-icon-circle-check">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

Icon List - Circle Plus

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

<ul class="list-icon list-icon-circle-plus">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

Icon List - Circle Arrow

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

<ul class="list-icon list-icon-circle-arrow">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>