List

Unstyled

Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

  • Lorem ipsum dolor sit amet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Ac tristique libero volutpat at
  • Eget porttitor lorem
<ul class="list list-unstyled">
  <li>Lorem ipsum dolor sit amet</li> 
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li> 
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li> 
  <li>Eget porttitor lorem</li>
</ul>

Inline

Remove a list’s bullets and apply some light margin with a combination of two classes, .list-inline and .list-inline-item.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

Icons

Checklist

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list list-icon-check">
  <li>Lorem ipsum</li>
  <li>Phasellus iaculis</li>
  <li>Nulla volutpat</li>
</ul>

Top

Use .flex-{breakpoint}-row.

  • Bower

    Bower is made by lots of people across the globe, contributions large and small. Be a part of it.

  • Bower

    Bower is made by lots of people across the globe, contributions large and small. Be a part of it.

  • Bower

    Bower is made by lots of people across the globe, contributions large and small. Be a part of it.

<ul class="list-icon flex-lg-row">
  <li class="flex-item">
    <figure class="list-item-icon">
      <svg id="bower" class="img-svg img-3x">
      ...
      </svg>
    </figure>
  </li>
</ul>

Left

Use .list-icon-left or .list-icon-{breakpoint}-left.

  • Bower

    Bower is made by lots of people across the globe, contributions large and small. Be a part of it.

  • Bower

    Bower is made by lots of people across the globe, contributions large and small. Be a part of it.

<ul class="list-icon list-icon-left flex-lg-row">
  <li class="flex-item">
    <figure class="list-item-icon">
      <svg id="bower" class="img-svg img-3x">
      ...
      </svg>
    </figure>
  </li>
</ul>

Grid

Use .flex-{breakpoint}-grid.

  • Bower

    Bower is made by lots of people across the globe, contributions large and small. Be a part of it.

  • Bower

    Bower is made by lots of people across the globe, contributions large and small. Be a part of it.

  • Bower

    Bower is made by lots of people across the globe, contributions large and small. Be a part of it.

  • Bower

    Bower is made by lots of people across the globe, contributions large and small. Be a part of it.

<ul class="list-icon flex-lg-grid">
  <li class="flex-item">
    <figure class="list-item-icon">
      <svg id="bower" class="img-svg img-3x">
      ...
      </svg>
    </figure>
  </li>
</ul>