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>

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

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>

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

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>

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

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>

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

<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>

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

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>

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

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>

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

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 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

Nested media heading

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 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.

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>

Top aligned media

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.

Middle aligned media

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.

Bottom aligned media

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 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.

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.

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.

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.

⌃

Open Kate Lab

Dark theme *
Theme color *
- Default colors:
- Google design guidelines colors:
- Custom color:
Boxed layout *
Scrollbar
- Browser Default Smooth scrolling
- Slim scrollbar Slim + Smooth
Button border radius
- Default Squared Pill
Shop
- Modal minicart
- Sync cart & modalcart
Form options
- Default form fields *
- Thick form field borders *
- Default Checkboxes
Default modal window*
Slab headings *
Disable parallax
Frame mode
Disable page transition

* without reload

Code pane