diff --git a/docs/_includes/components/list-group.html b/docs/_includes/components/list-group.html index e95c9d485988b94c9a0eee211feaf8e8baaa22df..607b1e6614219d27f1c907577ea13a61665fd336 100644 --- a/docs/_includes/components/list-group.html +++ b/docs/_includes/components/list-group.html @@ -74,6 +74,27 @@ <a href="#" class="list-group-item">Porta ac consectetur ac</a> <a href="#" class="list-group-item">Vestibulum at eros</a> </div> +{% endhighlight %} + + <h2 id="list-group-buttons">Button items</h2> + <p>List group items may be buttons instead of list items (that also means a parent <code><div></code> instead of an <code><ul></code>). No need for individual parents around each element. <strong class="text-danger">Don't use the standard <code>.btn</code> classes here.</strong></p> + <div class="bs-example" data-example-id="list-group-btns"> + <div class="list-group"> + <button class="list-group-item">Cras justo odio</button> + <button class="list-group-item">Dapibus ac facilisis in</button> + <button class="list-group-item">Morbi leo risus</button> + <button class="list-group-item">Porta ac consectetur ac</button> + <button class="list-group-item">Vestibulum at eros</button> + </div> + </div> +{% highlight html %} +<div class="list-group"> + <button class="list-group-item">Cras justo odio</button> + <button class="list-group-item">Dapibus ac facilisis in</button> + <button class="list-group-item">Morbi leo risus</button> + <button class="list-group-item">Porta ac consectetur ac</button> + <button class="list-group-item">Vestibulum at eros</button> +</div> {% endhighlight %} <h2 id="list-group-disabled">Disabled items</h2> diff --git a/docs/_includes/nav/components.html b/docs/_includes/nav/components.html index 49c8040c531691855798512750cb69f9811c4298..9c91bdada1d784884633c4a22c37eb07cc16334a 100644 --- a/docs/_includes/nav/components.html +++ b/docs/_includes/nav/components.html @@ -124,6 +124,7 @@ <li><a href="#list-group-basic">Basic example</a></li> <li><a href="#list-group-badges">Badges</a></li> <li><a href="#list-group-linked">Linked items</a></li> + <li><a href="#list-group-buttons">Button items</a></li> <li><a href="#list-group-disabled">Disabled items</a></li> <li><a href="#list-group-contextual-classes">Contextual classes</a></li> <li><a href="#list-group-custom-content">Custom content</a></li>