Lists

List group

Basic list group

Basic list with borders, you can use flags and badges on the right.

To use just add a span badges with badge badge-primary class element. Replaced primary by success, info, warning, danger or royal, depending on the color you want.

  • Cras justo odio
  • New Dapibus ac facilisis in
  • Morbi leo risus
  • 98 Porta ac consectetur ac
  • Vestibulum at eros
<ul class="list-group">
<li class="list-group-item">...</li>
<li class="list-group-item"><span class="label label-royal pull-right">New</span> ...</li>
<li class="list-group-item">...</li>
<li class="list-group-item"><span class="badge badge-primary">98</span> ...</li>
<li class="list-group-item">...</li>
</ul>
                                    

Striped list group

You can add class to the striped shading in columns of links.

This only works with lists of items, not linked lists.

  • 14 Cras justo odio
  • 778 Cras justo odio
  • 9 Dapibus ac facilisis in
  • 98 Cras justo odio
  • 17 Vestibulum at eros

Link lists

The link lists are created with a div element of class list-group composed of elements a of the class list-group-item.

You can also use badges and flags. as in Item Lists.


Colorful elements

You can use the class list-item-group-success or -info, -warning, -danger, -royal for coloring and highlighting elements of a list.

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

compressed lists

You can use the list-group-sm class to make more compact lists.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
  • 14 Cras justo odio
  • 778 Cras justo odio
  • 9 Dapibus ac facilisis in
  • 98 Cras justo odio
  • 17 Vestibulum at eros

Media Objects

Basic Media list

Use the media class to display multimedia content with a description beside her. They can be images, videos or other multimedia objects.

Use the media-object classes and media-heading for the media item and the item title respectively.

...

Media heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, dolor vitae praesentium consectetur molestias.

...

Media heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, dolor vitae praesentium consectetur molestias.

...

Media heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, dolor vitae praesentium consectetur molestias.


Media Lists

You can use chained lists. Perfect for systems and interests.

  • Generic placeholder image

    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.

    Generic placeholder image

    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.
    Generic placeholder image

    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.
    Generic placeholder image

    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.
  • Generic placeholder image

    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.