<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
-{% endhighlight %}
-
- <h3 id="list-group-chevrons">With chevrons</h3>
- <p>Add Glyphicon chevrons that are automatically moved to the right.</p>
- <div class="bs-example">
- <ul class="list-group">
- <li class="list-group-item">
- <span class="glyphicon glyphicon-chevron-right"></span>
- Cras justo odio
- </li>
- <li class="list-group-item">
- <span class="glyphicon glyphicon-chevron-right"></span>
- Dapibus ac facilisis in
- </li>
- <li class="list-group-item">
- <span class="glyphicon glyphicon-chevron-right"></span>
- Morbi leo risus
- </li>
- </ul>
- </div>
-{% highlight html %}
-<ul class="list-group">
- <li class="list-group-item">
- <span class="glyphicon glyphicon-chevron-right"></span>
- Cras justo odio
- </li>
-</ul>
{% endhighlight %}
<h3 id="list-group-badges">With badges</h3>
Cras justo odio
</li>
</ul>
-{% endhighlight %}
-
- <h3 id="list-group-badges-chevrons">With badges and chevrons</h3>
- <p>Why not both?</p>
- <div class="bs-example">
- <ul class="list-group">
- <li class="list-group-item">
- <span class="glyphicon glyphicon-chevron-right"></span>
- <span class="badge">14</span>
- Cras justo odio
- </li>
- <li class="list-group-item">
- <span class="glyphicon glyphicon-chevron-right"></span>
- <span class="badge">2</span>
- Dapibus ac facilisis in
- </li>
- <li class="list-group-item">
- <span class="glyphicon glyphicon-chevron-right"></span>
- <span class="badge">1</span>
- Morbi leo risus
- </li>
- </ul>
- </div>
-{% highlight html %}
-<ul class="list-group">
- <li class="list-group-item">
- <span class="glyphicon glyphicon-chevron-right"></span>
- <span class="badge">14</span>
- Cras justo odio
- </li>
-</ul>
{% endhighlight %}
<h3 id="list-group-linked">Linked list group</h3>
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
- <span class="glyphicon glyphicon-chevron-right"></span>
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in
- <span class="glyphicon glyphicon-chevron-right"></span>
</a>
<a href="#" class="list-group-item">Morbi leo risus
- <span class="glyphicon glyphicon-chevron-right"></span>
</a>
<a href="#" class="list-group-item">Porta ac consectetur ac
- <span class="glyphicon glyphicon-chevron-right"></span>
</a>
<a href="#" class="list-group-item">Vestibulum at eros
- <span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
- <span class="glyphicon glyphicon-chevron-right"></span>
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in
- <span class="glyphicon glyphicon-chevron-right"></span>
</a>
<a href="#" class="list-group-item">Morbi leo risus
- <span class="glyphicon glyphicon-chevron-right"></span>
</a>
<a href="#" class="list-group-item">Porta ac consectetur ac
- <span class="glyphicon glyphicon-chevron-right"></span>
</a>
<a href="#" class="list-group-item">Vestibulum at eros
- <span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
{% endhighlight %}