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
Content lists
You can also can add content such as headers and paragraphs to lists of links.
Use the class active to highlight the currently active element.
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.
-
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.
-
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.