Lists

Different styles of lists & list groups for your website

Unordered

  • 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

  • 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

  • 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

  • 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

  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

  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

  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

  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

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

  • 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

  •   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

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

  • 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

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

Badges

  • 14 Cras justo odio
  • 2 Dapibus ac facilisis in
  • 1 Morbi leo risus

Links

Disabled items

Contextual classes

  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum at eros

Custom content

Media object

Default

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

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

  • 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.
 Open Kate Lab  
* without reload
Code pane