Lists

Basic use for Lists with a few classes.

Default lists

Using <ul> for dafeault lists.

  • Lorem ipsum
  • Sed eros nisi
  • Cras dolor quam
    • First nesting
    • Lorem ipsum
      • Secong nesting
      • Lorem ipsum
  • Lorem ipsum
<ul>
  <li>Lorem ipsum</li>
  <li>Sed eros nisi</li>
  <li>
    Cras dolor quam
    <ul>
      <li>First nesting</li>
      <li>
        Lorem ipsum
        <ul>
          <li>Secong nesting</li>
          <li>Lorem ipsum</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Lorem ipsum</li>
</ul>

Using <ol> for dafeault lists.

  1. Lorem ipsum
  2. Sed eros nisi
  3. Cras dolor quam
    1. First nesting
    2. Lorem ipsum
      1. Secong nesting
      2. Lorem ipsum
  4. Lorem ipsum
<ol>
  <li>Lorem ipsum</li>
  <li>Sed eros nisi</li>
  <li>
    Cras dolor quam
    <ol>
      <li>First nesting</li>
      <li>
        Lorem ipsum
        <ol>
          <li>Secong nesting</li>
          <li>Lorem ipsum</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>Lorem ipsum</li>
</ol>

List group

You don’t need specify a child class.

  • Lorem ipsum
  • Sed eros nisi
  • Cras dolor quam
  • Proin a erat eget massa
<ul class="list-group">
  <li>Lorem ipsum</li>
  <li>Sed eros nisi</li>
  <li>Cras dolor quam</li>
  <li>Proin a erat eget massa</li>
</ul>

You use list-group for any tag and create you own lists with any tag.

Sed blandit gravida est vel Lorem ipsum Cras dolor quam Proin a erat eget massa

<p class="list-group">
  <a href="#">Sed blandit gravida est vel</a>
  <span>Lorem ipsum</span>
  <span>Cras dolor quam</span>
  <span>Proin a erat eget massa</span>
</p>

List group flush

  • Lorem ipsum
  • Sed eros nisi
  • Cras dolor quam
  • Proin a erat eget massa
<ul class="list-group-flush">
  <li>Lorem ipsum</li>
  <li>Sed eros nisi</li>
  <li>Cras dolor quam</li>
  <li>Proin a erat eget massa</li>
</ul>

List group interleaved

  • Lorem ipsum
  • Sed eros nisi
  • Cras dolor quam
  • Proin a erat eget massa
  • nteger venenatis
<ul class="list-group-interleaved">
  <li>Lorem ipsum</li>
  <li>Sed eros nisi</li>
  <li>Cras dolor quam</li>
  <li>Proin a erat eget massa</li>
  <li>nteger venenatis</li>
</ul>