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 withbadge 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 thestriped 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 adiv 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 classlist-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 thelist-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 classactive to highlight the currently active element.
List group item heading
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, vitae.!
List group item heading
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, facilis.!
List group item heading
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, nobis?!
Media Objects
Basic Media list
Use themedia 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.