List groups

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed. Add .active or .disabled to an item to make it appear activated or disabled respectively.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

<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 disabled">Morbi leo risus</li>
	<li class="list-group-item">Porta ac consectetur ac</li>
	<li class="list-group-item">Vestibulum at eros</li>
</ul>

List group content

Use <a>s or <button>s to create actionable list group items with hover, disabled and active states byu adding .list-group-item-action. Be sure not to use the standard .btn class here.

Cras justo odio Dapibus ac facilisis in Vestibulum at eros 
 
<!-- List group of actionable anchor elements -->
<div class="list-group">
	<a href="#" class="list-group-item list-group-item-action active">Cras justo odio</a>
	<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
	<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
</div>
<!-- List group of actionable button elements -->
<div class="list-group mt-3">
	<button type="button" class="list-group-item list-group-item-action active">Cras justo odio</button>
	<button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
	<button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
</div>

Badges

  • Cras justo odio 14
  • Dapibus ac facilisis in 2
  • Morbi leo risus 1 
 
<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>

Complex content

List group item heading
3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
List group item heading
3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
List group item heading
3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta. 
 
<div class="list-group">
	<a href="#" class="list-group-item list-group-item-action flex-column align-items-start 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 flex-column align-items-start">
		<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 flex-column align-items-start">
		<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>

Customizing list groups

Flush

Add .list-group-flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g. cards).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
 
<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>

Contextual classes

Use contextual classes in the format of .list-group-item-{color} to style list items with a stateful background and color.

  • Dapibus ac facilisis in
  • A simple primary list group item
  • A simple secondary list group item
  • A simple success list group item
  • A simple danger list group item
  • A simple warning list group item
  • A simple info list group item
  • A simple light list group item
  • A simple dark list group item
 
<ul class="list-group">
	<li class="list-group-item">Dapibus ac facilisis in</li> 
	<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
	<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
	<li class="list-group-item list-group-item-success">A simple success list group item</li>
	<li class="list-group-item list-group-item-danger">A simple danger list group item</li>
	<li class="list-group-item list-group-item-warning">A simple warning list group item</li>
	<li class="list-group-item list-group-item-info">A simple info list group item</li>
	<li class="list-group-item list-group-item-light">A simple light list group item</li>
	<li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

This also works for actionable list group items. Note the addition of the hover styles compared to the previous example.

Dapibus ac facilisis in A simple primary list group item A simple secondary list group item A simple success list group item A simple danger list group item A simple warning list group item A simple info list group item A simple light list group item A simple dark list group item 
 
<div class="list-group">
	<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
	<a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
	<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
	<a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
	<a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
	<a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
	<a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
	<a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
	<a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>

Read more

Lightbox Modals