List group

Basic use: Default

No links:

• Text
• Text

With links:

Code

<p>No links:</p>
<ul class="list-group">
	<li class="list-group-item">Text</li>
	<li class="list-group-item">Text</li>
</ul>
<p>With links:</p>
<div class="list-group">
	<a href="#" class="list-group-item">Link text</a>
	<a href="#" class="list-group-item active">Link text (active item)</a>
	<a href="#" class="list-group-item">Link text</a>
</div>

Enhanced use

Colours

No links:

• Text
• Text
• Text
• Text

With links:

Code

<p>No links:</p>
<ul class="list-group">
	<li class="list-group-item list-group-item-success">Text</li>
	<li class="list-group-item list-group-item-info">Text</li>
	<li class="list-group-item list-group-item-warning">Text</li>
	<li class="list-group-item list-group-item-danger">Text</li>
</ul>
<p>With links:</p>
<div class="list-group">
	<a href="#" class="list-group-item list-group-item-success">Link text</a>
	<a href="#" class="list-group-item list-group-item-info">Link text</a>
	<a href="#" class="list-group-item list-group-item-warning">Link text</a>
	<a href="#" class="list-group-item list-group-item-danger">Link text</a>
</div>
<div class="list-group">
	<a href="#" class="list-group-item list-group-item-success active">Link text (active item)</a>
	<a href="#" class="list-group-item list-group-item-info active">Link text (active item)</a>
	<a href="#" class="list-group-item list-group-item-warning active">Link text (active item)</a>
	<a href="#" class="list-group-item list-group-item-danger active">Link text (active item)</a>
</div>

Badges

Code

<div class="panel-body">
	<p>No links:</p>
	<ul class="list-group">
		<li class="list-group-item"><span class="badge">14</span> Text</li>
		<li class="list-group-item"><span class="badge">2</span> Text</li>
	</ul>
	<p>With links:</p>
	<div class="list-group">
		<a href="#" class="list-group-item"><span class="badge">14</span> Link text</a>
		<a href="#" class="list-group-item active"><span class="badge">2</span> Link text (active item)</a>
		<a href="#" class="list-group-item"><span class="badge">5</span> Link text</a>
	</div>
</div>

Complex content

The following content are not compliant to accessibility and they are there only for example purpose. Skip this non-accessible content section.

No links:

• Heading

  Content

• Heading

  Content

With links:

Code

<p>No links:</p>
<ul class="list-group">
	<li class="list-group-item">
		<h3 class="list-group-item-heading">Heading</h3>
		<p class="list-group-item-text">Content</p>
	</li>
	<li class="list-group-item">
		<h3 class="list-group-item-heading">Heading</h3>
		<p class="list-group-item-text">Content</p>
	</li>
</ul>
<p>With links:</p>
<div class="list-group">
	<a href="#" class="list-group-item">
		<h3 class="list-group-item-heading">Heading</h3>
		<p class="list-group-item-text">Content</p>
	</a>
	<a href="#" class="list-group-item active">
		<h3 class="list-group-item-heading">Heading</h3>
		<p class="list-group-item-text">Content</p>
	</a>
	<a href="#" class="list-group-item">
		<h3 class="list-group-item-heading">Heading</h3>
		<p class="list-group-item-text">Content</p>
	</a>
</div>