Lists

Use lists to organize groups of similar data.

<ul>
	<li>List Item</li>
	<li>List Item</li>
	<li>List Item</li>
	<li>List Item</li>
	<li>List Item</li>
</ul>

Custom CSS

For Description Lists, you may wish to add some margin-bottom to each description pair.

For List Groups, you may wish to set the <a> element to display: block so that users may activate the link from anywhere inside the list element.

You may add the .active class to any <li> or <button> tag to highlight an active row.

/* Add bottom margin to the description lists */
dd {
   margin-bottom: 1rem;
}

/* Set the anchor element to display block */
.list-group li a {
   display: block;
}

Notes

You may add color to List Group item backgrounds by adding these additional classes: .list-group-item-*

<li class="list-group-item list-group-item-info">

<li class="list-group-item list-group-item-success">

<li class="list-group-item list-group-item-warning">

<li class="list-group-item list-group-item-danger">