Lists

Different styles of lists & list groups for your website

Unordered

<ul class="list">
  <li>What is love</li>
  <li>Baby don&#x27;t hurt me</li>
  <li>Don&#x27;t hurt me</li>
  <li>No more</li>
  <li>So what is right</li>
  <li>And what is wrong</li>
  <li>Gimme a sign</li>
  <li>Woah-woah-woah</li>
</ul>
  • What is love
  • Baby don't hurt me
  • Don't hurt me
  • No more
  • So what is right
  • And what is wrong
  • Gimme a sign
  • Woah-woah-woah

Circles

<ul class="list-circle">
  <li>What is love</li>
  <li>Baby don&#x27;t hurt me</li>
  <li>Don&#x27;t hurt me</li>
  <li>No more</li>
  <li>So what is right</li>
  <li>And what is wrong</li>
  <li>Gimme a sign</li>
  <li>Woah-woah-woah</li>
</ul>
  • What is love
  • Baby don't hurt me
  • Don't hurt me
  • No more
  • So what is right
  • And what is wrong
  • Gimme a sign
  • Woah-woah-woah

Square

<ul class="list-square">
  <li>What is love</li>
  <li>Baby don&#x27;t hurt me</li>
  <li>Don&#x27;t hurt me</li>
  <li>No more</li>
  <li>So what is right</li>
  <li>And what is wrong</li>
  <li>Gimme a sign</li>
  <li>Woah-woah-woah</li>
</ul>
  • What is love
  • Baby don't hurt me
  • Don't hurt me
  • No more
  • So what is right
  • And what is wrong
  • Gimme a sign
  • Woah-woah-woah

Unstyled

<ul class="list-unstyled">
  <li>What is love</li>
  <li>Baby don&#x27;t hurt me</li>
  <li>Don&#x27;t hurt me</li>
  <li>No more</li>
  <li>So what is right</li>
  <li>And what is wrong</li>
  <li>Gimme a sign</li>
  <li>Woah-woah-woah</li>
</ul>
  • What is love
  • Baby don't hurt me
  • Don't hurt me
  • No more
  • So what is right
  • And what is wrong
  • Gimme a sign
  • Woah-woah-woah

Ordered

<ol class="list">
  <li>What is love</li>
  <li>Baby don&#x27;t hurt me</li>
  <li>Don&#x27;t hurt me</li>
  <li>No more</li>
  <li>So what is right</li>
  <li>And what is wrong</li>
  <li>Gimme a sign</li>
  <li>Woah-woah-woah</li>
</ol>
  1. What is love
  2. Baby don't hurt me
  3. Don't hurt me
  4. No more
  5. So what is right
  6. And what is wrong
  7. Gimme a sign
  8. Woah-woah-woah

Uppercase

<ol class="list" type="A">
  <li>What is love</li>
  <li>Baby don&#x27;t hurt me</li>
  <li>Don&#x27;t hurt me</li>
  <li>No more</li>
  <li>So what is right</li>
  <li>And what is wrong</li>
  <li>Gimme a sign</li>
  <li>Woah-woah-woah</li>
</ol>
  1. What is love
  2. Baby don't hurt me
  3. Don't hurt me
  4. No more
  5. So what is right
  6. And what is wrong
  7. Gimme a sign
  8. Woah-woah-woah

Lowercase

<ol class="list" type="a">
  <li>What is love</li>
  <li>Baby don&#x27;t hurt me</li>
  <li>Don&#x27;t hurt me</li>
  <li>No more</li>
  <li>So what is right</li>
  <li>And what is wrong</li>
  <li>Gimme a sign</li>
  <li>Woah-woah-woah</li>
</ol>
  1. What is love
  2. Baby don't hurt me
  3. Don't hurt me
  4. No more
  5. So what is right
  6. And what is wrong
  7. Gimme a sign
  8. Woah-woah-woah

Roman

<ol class="list" type="I">
  <li>What is love</li>
  <li>Baby don&#x27;t hurt me</li>
  <li>Don&#x27;t hurt me</li>
  <li>No more</li>
  <li>So what is right</li>
  <li>And what is wrong</li>
  <li>Gimme a sign</li>
  <li>Woah-woah-woah</li>
</ol>
  1. What is love
  2. Baby don't hurt me
  3. Don't hurt me
  4. No more
  5. So what is right
  6. And what is wrong
  7. Gimme a sign
  8. Woah-woah-woah

Description

<dl>
  <dt>What is love</dt>
  <dd>- Baby don&#x27;t hurt me</dd>
  <dd>- Don&#x27;t hurt me</dd>
  <dd>- No more</dd>
  <dt>So what is right</dt>
  <dd>- And what is wrong</dd>
  <dd>- Gimme a sign</dd>
  <dd>- Woah-woah-woah</dd>
</dl>
What is love
- Baby don't hurt me
- Don't hurt me
- No more
So what is right
- And what is wrong
- Gimme a sign
- Woah-woah-woah

Nested

<ul class="list">
  <li>What is love</li>
  <li>Baby don&#x27;t hurt me
    <ul>
      <li>Don&#x27;t hurt me</li>
      <li>No more</li>
    </ul>
  </li>
  <li>So what is right</li>
  <li>And what is wrong
    <ul>
      <li>Gimme a sign</li>
      <li>Woah-woah-woah</li>
    </ul>
  </li>
</ul>
  • What is love
  • Baby don't hurt me
    • Don't hurt me
    • No more
  • So what is right
  • And what is wrong
    • Gimme a sign
    • Woah-woah-woah

Icons

<ul class="list-unstyled">
  <li><i class="fa fa-question-circle fa-fw"></i>&nbsp;&nbsp;What is love</li>
  <li><i class="fa fa-heart-o fa-fw"></i>&nbsp;&nbsp;Baby don&#x27;t hurt me</li>
  <li><i class="fa fa-gavel fa-fw"></i>&nbsp;&nbsp;Don&#x27;t hurt me</li>
  <li><i class="fa fa-times fa-fw"></i>&nbsp;&nbsp;No more</li>
  <li><i class="fa fa-hand-o-right fa-fw"></i>&nbsp;&nbsp;So what is right</li>
  <li><i class="fa fa-hand-paper-o fa-fw"></i>&nbsp;&nbsp;And what is wrong</li>
  <li><i class="fa fa-map-signs fa-fw"></i>&nbsp;&nbsp;Gimme a sign</li>
  <li><i class="fa fa-commenting-o fa-fw"></i>&nbsp;&nbsp;Woah-woah-woah</li>
</ul>
  •   What is love
  •   Baby don't hurt me
  •   Don't hurt me
  •   No more
  •   So what is right
  •   And what is wrong
  •   Gimme a sign
  •   Woah-woah-woah

Description horizontal

<dl class="dl-horizontal">
  <dt>What is love</dt>
  <dd>Baby don&#x27;t hurt me, Don&#x27;t hurt me, No more</dd>
  <dd>And what is wrong, Gimme a sign, Woah-woah-woah</dd>
  <dt>So what is right</dt>
  <dd>Baby don&#x27;t hurt me, Don&#x27;t hurt me, No more</dd>
  <dd>And what is wrong, Gimme a sign, Woah-woah-woah</dd>
</dl>
What is love
Baby don't hurt me, Don't hurt me, No more
And what is wrong, Gimme a sign, Woah-woah-woah
So what is right
Baby don't hurt me, Don't hurt me, No more
And what is wrong, Gimme a sign, Woah-woah-woah

Inline

<ul class="list-inline">
  <li>What is love</li>
  <li>Baby don&#x27;t hurt me</li>
  <li>Don&#x27;t hurt me</li>
  <li>No more</li>
  <li>So what is right</li>
  <li>And what is wrong</li>
  <li>Gimme a sign</li>
  <li>Woah-woah-woah</li>
</ul>
  • What is love
  • Baby don't hurt me
  • Don't hurt me
  • No more
  • So what is right
  • And what is wrong
  • Gimme a sign
  • Woah-woah-woah

List group

Default

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

Badges

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
  <li class="list-group-item">
    <span class="badge">2</span>
    Dapibus ac facilisis in
  </li>
  <li class="list-group-item">
    <span class="badge">1</span>
    Morbi leo risus
  </li>
</ul>
  • 14 Cras justo odio
  • 2 Dapibus ac facilisis in
  • 1 Morbi leo risus

Links

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Disabled items

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item disabled">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item disabled">Vestibulum at eros</a>
</div>

Contextual classes

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum at eros

Custom content

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
  </a>
</div>

Media object

Default

<div class="media">
  <div class="media-left">
    <a href="#"><img src="/img/64x64.jpg" alt="Media Object" class="media-object"></a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>
<div class="media">
  <div class="media-left">
    <a href="#"><img src="/img/64x64.jpg" alt="Media Object" class="media-object"></a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    <div class="media">
      <div class="media-left">
        <a href="#"><img src="/img/64x64.jpg" alt="Media Object" class="media-object"></a>
      </div>
      <div class="media-body">
        <h4 class="media-heading">Nested media heading</h4>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div>
    </div>
  </div>
</div>
<div class="media">
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  </div>
  <div class="media-right">
    <a href="#"><img src="/img/64x64.jpg" alt="Media Object" class="media-object"></a>
  </div>
</div>
<div class="media">
  <div class="media-left">
    <a href="#"><img src="/img/64x64.jpg" alt="Media Object" class="media-object"></a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  </div>
  <div class="media-right">
    <a href="#"><img src="/img/64x64.jpg" alt="Media Object" class="media-object"></a>
  </div>
</div>
Media Object

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Media Object

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Media Object

Nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Media Object
Media Object

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Media Object

Alignment

<div class="media">
  <div class="media-left">
    <a href="#"><img src="/img/64x64.jpg" alt="Media Object" class="media-object"></a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Top aligned media</h4>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>
<div class="media">
  <div class="media-left media-middle">
    <a href="#"><img src="/img/64x64.jpg" alt="Media Object" class="media-object"></a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>
<div class="media">
  <div class="media-left media-bottom">
    <a href="#"><img src="/img/64x64.jpg" alt="Media Object" class="media-object"></a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Bottom aligned media</h4>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>
Media Object

Top aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Media Object

Middle aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Media Object

Bottom aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

List

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#"><img src="/img/64x64.jpg" alt="Media Object" class="media-object"></a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
      <div class="media">
        <div class="media-left">
          <a href="#"><img src="/img/64x64.jpg" alt="Media Object" class="media-object"></a>
        </div>
        <div class="media-body">
          <h4 class="media-heading">Nested media heading</h4>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
          <div class="media">
            <div class="media-left">
              <a href="#"><img src="/img/64x64.jpg" alt="Media Object" class="media-object"></a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">Nested media heading</h4>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
            </div>
          </div>
        </div>
      </div>
      <div class="media">
        <div class="media-left">
          <a href="#"><img src="/img/64x64.jpg" alt="Media Object" class="media-object"></a>
        </div>
        <div class="media-body">
          <h4 class="media-heading">Nested media heading</h4>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
        </div>
      </div>
    </div>
  </li>
</ul>
  • Media Object

    Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Media Object

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    Media Object

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    Media Object

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.