基本列表組
最基本的列表組是一個無序列表列表項：
- 第一項
- 第二項
- 第三項
要創建一個基本的清單組，使用<ul>與類元素.list-group ，和<li>與類元素.list-group-item ：
例
<ul class="list-group">
<li class="list-group-item">First
item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul> 試一試» 清單組徽章
您也可以徽章添加到列表組。 徽章將自動位於右側：
- 12新
- 5刪除
- 3警告
要創建一個徽章，創建一個<span>與類元素.badge列表項內：
例
<ul class="list-group">
<li
class="list-group-item"><span class="badge">12</span> New</li>
<li
class="list-group-item"><span class="badge">5</span> Deleted</li>
<li class="list-group-item"><span class="badge">3</span> Warnings</li>
</ul> 試一試» 列出組鏈接項目
列表中的組中的項目也可以是超鏈接。 這將添加一個灰色的背景色上懸停：
要創建一個列表組鏈接項目，使用<div>而不是<ul>和<a>代替<li>
例
<div class="list-group">
<a href="#" class="list-group-item">First item</a>
<a href="#" class="list-group-item">Second
item</a>
<a href="#" class="list-group-item">Third item</a>
</div> 試一試» 活動狀態
使用.active類突顯當前項目：
例
<div class="list-group">
<a href="#" class="list-group-item
active">First item</a>
<a href="#" class="list-group-item">Second
item</a>
<a href="#" class="list-group-item">Third item</a>
</div> 試一試» 殘疾人項目
下面的列表組有一個禁用的項目：
要禁用某個項目，添加.disabled類：
例
<div class="list-group">
<a href="#" class="list-group-item
disabled">First item</a>
<a href="#" class="list-group-item">Second
item</a>
<a href="#" class="list-group-item">Third item</a>
</div> 試一試» 上下文類
上下文類可用於彩色列表項：
- 第一項
- 第二項
- 第三項
- 第四個項目
著色列表項的類是： .list-group-item-success ， list-group-item-info ， list-group-item-warning ，並.list-group-item-danger ：
例
<ul class="list-group">
<li class="list-group-item
list-group-item-success">First item</li>
<li
class="list-group-item list-group-item-info">Second item</li>
<li
class="list-group-item list-group-item-warning">Third item</li>
<li class="list-group-item list-group-item-danger">Fourth item</li>
</ul> 試一試» 自定義內容
您可以將列表組項目內增加近任何HTML。
Bootstrap提供了類.list-group-item-heading和.list-group-item-text可以按如下方式使用：
例
<div class="list-group">
<a href="#" class="list-group-item
active">
<h4 class="list-group-item-heading">First
List Group Item Heading</h4>
<p
class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4
class="list-group-item-heading">Second List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4
class="list-group-item-heading">Third List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
</div> 試一試»