<ul class="list-group"><li class="list-group-item">Cras justo odio</li><li class="list-group-item">Dapibus ac facilisis in</li><li class="list-group-item">Morbi leo risus</li><li class="list-group-item">Porta ac consectetur ac</li><li class="list-group-item">Vestibulum at eros</li></ul>

<ul class="list-group"><li class="list-group-item">Cras justo odio</li><li class="list-group-item active">Dapibus ac facilisis in</li><li class="list-group-item">Morbi leo risus</li><li class="list-group-item">Porta ac consectetur ac</li><li class="list-group-item">Vestibulum at eros</li></ul>

<ul class="list-group"><li class="list-group-item disabled" aria-disabled="true">Cras justo odio</li><li class="list-group-item">Dapibus ac facilisis in</li><li class="list-group-item">Morbi leo risus</li><li class="list-group-item">Porta ac consectetur ac</li><li class="list-group-item">Vestibulum at eros</li></ul>

<!-- Link --><div class="list-group"><a href="#" class="list-group-item list-group-item-action">...</a><a href="#" class="list-group-item list-group-item-action">...</a><a href="#" class="list-group-item list-group-item-action">...</a><a href="#" class="list-group-item list-group-item-action">...</a><a href="#" class="list-group-item list-group-item-action">...</a></div><!-- Button --><div class="list-group"><button type="button" class="list-group-item list-group-item-action">...</button><button type="button" class="list-group-item list-group-item-action">...</button><button type="button" class="list-group-item list-group-item-action">...</button><button type="button" class="list-group-item list-group-item-action">...</button><button type="button" class="list-group-item list-group-item-action">...</button></div>

<ul class="list-group list-group-flush"><li class="list-group-item">Cras justo odio</li><li class="list-group-item">Dapibus ac facilisis in</li><li class="list-group-item">Morbi leo risus</li><li class="list-group-item">Porta ac consectetur ac</li><li class="list-group-item">Vestibulum at eros</li></ul>

<ul class="list-group"><li class="list-group-item list-group-item-primary">...</li><li class="list-group-item list-group-item-secondary">...</li><li class="list-group-item list-group-item-success">...</li><li class="list-group-item list-group-item-danger">...</li><li class="list-group-item list-group-item-warning">...</li><li class="list-group-item list-group-item-info">...</li><li class="list-group-item list-group-item-light">...</li><li class="list-group-item list-group-item-dark">...</li></ul><!-- Light --><ul class="list-group"><li class="list-group-item list-group-item-primary-bright">...</li><li class="list-group-item list-group-item-secondary-bright">...</li><li class="list-group-item list-group-item-success-bright">...</li><li class="list-group-item list-group-item-danger-bright">...</li><li class="list-group-item list-group-item-warning-bright">...</li><li class="list-group-item list-group-item-info-bright">...</li><li class="list-group-item list-group-item-dark-bright">...</li></ul>

<ul class="list-group"><li class="list-group-item d-flex justify-content-between align-items-center">Cras justo odio <span class="badge badge-primary badge-pill">14</span></li><li class="list-group-item d-flex justify-content-between align-items-center">Dapibus ac facilisis in <span class="badge badge-primary badge-pill">2</span></li><li class="list-group-item d-flex justify-content-between align-items-center">Morbi leo risus <span class="badge badge-primary badge-pill">1</span></li></ul>

<div class="list-group"><a href="#" class="list-group-item list-group-item-action active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1">List group item heading</h5><small>3 days ago</small></div><p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p><small>Donec id elit non mi porta.</small></a><a href="#" class="list-group-item list-group-item-action"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1">List group item heading</h5><small class="text-muted">3 days ago</small></div><p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p><small class="text-muted">Donec id elit non mi porta.</small></a><a href="#" class="list-group-item list-group-item-action"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1">List group item heading</h5><small class="text-muted">3 days ago</small></div><p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p><small class="text-muted">Donec id elit non mi porta.</small></a></div>

<div class="row"><div class="col-md-4"><div class="list-group" id="list-tab" role="tablist"><a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab">Home</a><a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab">Profile</a><a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" >Messages</a><a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" >Settings</a></div></div><div class="col-md-8"><div class="tab-content" id="nav-tabContent"><div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div><div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div><div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div><div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div></div></div></div>