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>
Page details
- Date modified: