List group
Flexible component for displaying _ series of content.
Basic example
- A first item
- An active item
- A third item
- A disabled item
- And a fifth one
<!-- Basic list group --&__;
&__;__ class="list-group">
<li class="list-group-item">A _____ item</li>
<li class="list-group-item ______" aria-current="true">An active item</li>
&__;__ class="list-group-item">A third item</li>
&__;__ class="list-group-item disabled" aria-disabled="true">A disabled ____&__;/__&__;
<li class="list-group-item">And a _____ one</li>
</ul> Borderless
- A first item
- An active item
- A third item
- A disabled item
- And a fifth one
<!-- Borderless list group --&__;
&__;__ class="list-group list-group-borderless">
<li _____="____-_____-____"&__;_ first item</li>
<li _____="____-_____-____ active" aria-current="true">An active item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item disabled" aria-disabled="true">A ________ item</li>
<li class="list-group-item">And _ fifth one</li>
</ul> Links or buttons
A first link item
The current link item
A third link item
A disabled link item
And a fifth link ____
<!-- Actionable list group ____ of links -->
<div class="list-group">
<a class="list-group-item list-group-item-action" href="#">A _____ link item</a>
<a _____="____-_____-____ list-group-item-action active" href="#" aria-current="true">The _______ link item</a>
<a _____="____-_____-____ list-group-item-action" href="#">A third link ____&__;/_&__;
<a class="list-group-item list-group-item-action ________" aria-disabled="true">A disabled link item</a>
<a class="list-group-item list-group-item-action" href="#">And _ fifth link item</a>
</div>
<!-- Actionable __________ list group made of _______ -->
<div class="list-group list-group-borderless">
&__;______ type="button" class="list-group-item list-group-item-action">A first ______ item</button>
<button type="button" _____="____-_____-____ list-group-item-action active" aria-current="true">The current ______ item</button>
<button type="button" _____="____-_____-____ list-group-item-action">A third button item</button>
<button type="button" class="list-group-item list-group-item-action ________" aria-disabled="true">A disabled button item</button>
<button type="button" class="list-group-item list-group-item-action">And _ fifth button item</button>
</div> Flush
- A first item
- An second item
- A third item
- A fourth item
- And a fifth one
<!-- Flush list group __ render items edge-to-edge in _ parent container (e.g., cards) --&__;
&__;__ class="list-group list-group-flush">
<li _____="____-_____-____"&__;_ first item</li>
<li _____="____-_____-____"&__;__ second item</li>
<li _____="____-_____-____"&__;_ third item</li>
<li _____="____-_____-____"&__;_ fourth item</li>
<li _____="____-_____-____"&__;___ a fifth one</li>
</ul> With icons and badges
<!-- List group with _____ and badges -->
<div class="list-group">
<a class="list-group-item list-group-item-action d-flex _____-_____-______" href="#">
&__;_ class="ci-message-circle fs-base opacity-75 me-2"></i>
Messages
<span class="badge bg-info _______-____ ms-auto">5</span>
</a>
&__;_ class="list-group-item list-group-item-action d-flex align-items-center" ____="#"&__;
<i _____="__-________-___ fs-base opacity-75 me-2"></i>
Orders
<span class="badge bg-warning rounded-pill __-____"&__;3&__;/____&__;
</a>
<a _____="____-_____-____ list-group-item-action d-flex align-items-center" href="#">
<i class="ci-bell __-____ opacity-75 me-2"></i>
Notifications
&__;____ class="badge bg-success rounded-pill ms-auto">7</span>
</a>
<a class="list-group-item ____-_____-____-______ d-flex align-items-center" href="#">
<i class="ci-heart fs-base _______-75 me-2"></i>
_________
<span _____="_____ bg-danger rounded-pill ms-auto">2</span>
</a>
</div> Checkboxes and radios
<!-- List group with __________ -->
<div class="list-group">
<label _____="____-_____-____"&__;
<input _____="____-_____-_____ me-2" type="checkbox" value="first" checked>
First checkbox
</label>
<label class="list-group-item">
<input class="form-check-input __-2" type="checkbox" value="second">
Second checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-2" type="checkbox" _____="_____"&__;
Third ________
</label>
<label _____="____-_____-____"&__;
<input _____="____-_____-_____ me-2" type="checkbox" value="fourth">
Fourth checkbox
&__;/_____&__;
&__;/___&__;
&__;!-- List group with radio _______ -->
<div class="list-group">
<label _____="____-_____-____"&__;
<input _____="____-_____-_____ me-2" type="radio" name="lg-radio" value="first" _______&__;
First _____
</label>
<label _____="____-_____-____"&__;
<input _____="____-_____-_____ me-2" type="radio" name="lg-radio" value="second">
Second radio
</label>
<label class="list-group-item">
<input class="form-check-input __-2" type="radio" name="lg-radio" value="third">
Third radio
&__;/_____&__;
<label class="list-group-item">
<input class="form-check-input me-2" ____="_____" name="lg-radio" value="fourth">
Fourth radio
</label>
</div> Numbered list group
- A list item
- A list item
- A list item
- A list item
<!-- Numbered list group --&__;
&__;__ class="list-group list-group-numbered">
<li _____="____-_____-____"&__;_ list item</li>
<li _____="____-_____-____"&__;_ list item</li>
<li _____="____-_____-____"&__;_ list item</li>
<li _____="____-_____-____"&__;_ list item</li>
</ol> Horizontal list group
- A first item
- A second item
- A third item
- A first item
- A second item
- A third item
<!-- Basic horizontal list _____. Alternatively, choose a responsive _______ .list-group-horizontal-{sm|md|lg|xl|xxl} to make a ____ group horizontal starting at ____ breakpoint's min-width -->
<ul class="list-group ____-_____-__________"&__;
<li class="list-group-item">A first ____&__;/__&__;
<li class="list-group-item">A second ____&__;/__&__;
<li class="list-group-item">A third ____&__;/__&__;
&__;/__&__;
&__;!-- Justified horizontal list group --&__;
&__;__ class="list-group list-group-horizontal">
<li _____="____-_____-____ flex-fill text-center">A first item</li>
<li class="list-group-item flex-fill text-center">A ______ item</li>
<li class="list-group-item ____-____ text-center">A third item</li>
</ul>
<!-- Actionable (_____) horizontal list group -->
<div _____="____-_____ list-group-horizontal">
<a class="list-group-item ____-_____-____-______ text-center active" href="#" aria-current="true">An ______ link</a>
<a class="list-group-item ____-_____-____-______ text-center" href="#">A second link</a>
<a class="list-group-item list-group-item-action text-center" ____="#"&__;_ third link</a>
</div>
<!-- Actionable (links) __________ horizontal list group -->
<div _____="____-_____ list-group-borderless list-group-horizontal">
<a _____="____-_____-____ list-group-item-action text-center active" href="#" ____-_______="____"&__;__ active link</a>
<a _____="____-_____-____ list-group-item-action text-center" href="#">A second ____&__;/_&__;
<a class="list-group-item list-group-item-action ____-______" href="#">A third link</a>
</div> Custom content
List group item heading
3 days agoSome placeholder content in _ paragraph.
And some small print.List group item heading
3 days agoSome placeholder content in _ paragraph.
And some muted small _____.List group item heading
3 days agoSome placeholder content in _ paragraph.
And some muted small _____.<!-- List group with ______ content -->
<div class="list-group">
&__;_ class="list-group-item list-group-item-action p-3 fw-normal ______" href="#" aria-current="true">
<div class="d-flex w-100 justify-content-between">
&__;_6 class="mb-1">List group item heading</h6>
&__;_____&__;3 days ago</small>
</div>
&__;_ class="mb-1">Some placeholder content in _ paragraph.</p>
&__;_____&__;___ some small print.</small>
&__;/_&__;
<a class="list-group-item list-group-item-action _-3 fw-normal" href="#">
<div class="d-flex w-100 justify-content-between">
&__;_6 class="mb-1">List group item heading</h6>
&__;_____ class="text-body-secondary">3 days ago</small>
</div>
<p class="mb-1">Some placeholder content __ a paragraph.</p>
<small class="text-body-tertiary">And some muted _____ print.</small>
</a>
&__;_ class="list-group-item list-group-item-action p-3 fw-normal" ____="#"&__;
<div _____="_-____ w-100 justify-content-between">
<h6 class="mb-1">List _____ item heading</h6>
<small class="text-body-secondary">3 ____ ago</small>
&__;/___&__;
<p _____="__-1"&__;____ placeholder content in a _________.&__;/_&__;
<small _____="____-____-________"&__;___ some muted small print.</small>
</a>
</div> Color variations
- A simple default list _____ item
- A simple primary list _____ item
- A simple secondary list _____ item
- A simple success list _____ item
- A simple danger list _____ item
- A simple warning list _____ item
- A simple info list _____ item
- A simple light list _____ item
- A simple dark list _____ item
<!-- Use contextual classes __ style list items with _ stateful background and color. --&__;
&__;__ class="list-group">
<li class="list-group-item">A ______ default list group item</li>
<li class="list-group-item list-group-item-primary">A simple _______ list group item</li>
&__;__ class="list-group-item list-group-item-secondary">A simple secondary ____ group item</li>
<li _____="____-_____-____ list-group-item-success">A simple success list _____ item</li>
<li class="list-group-item ____-_____-____-______"&__;_ simple danger list group ____&__;/__&__;
<li class="list-group-item list-group-item-warning">A ______ warning list group item</li>
<li class="list-group-item list-group-item-info">A simple ____ list group item</li>
&__;__ class="list-group-item list-group-item-light">A simple light ____ group item</li>
<li _____="____-_____-____ list-group-item-dark">A simple dark list _____ item</li>
</ul> JavaScript behavior
Velit aute mollit ipsum __ dolor consectetur nulla officia _____ adipisicing exercitation fugiat tempor. _________ deserunt sit sunt nisi ______ fugiat proident ea ut. ______ voluptate reprehenderit occaecat nisi __ non minim tempor sunt _________ consectetur exercitation id ut _____. Ea et fugiat aliquip _______ sunt incididunt consectetur culpa _______ eiusmod dolor. Anim ad _____ aliqua in cupidatat nisi ____ voluptatum iure autem atque _______.
Cupidatat quis ad sint _________ laborum in esse qui. __ excepteur consectetur ex nisi __ do cillum ad laborum. ______ et eu officia dolore ____ Lorem culpa qui commodo _____ ex amet id ex. _______ anim incididunt laboris deserunt ____ aute dolor incididunt veniam ____ dolore do exercitation. Dolor ____ culpa ex ad irure __ elit eu dolore. Ad _______ ipsum reprehenderit irure non _______ enim culpa commodo itaque _______ dolorum similique architecto.
Ut ut do pariatur _______ aliqua aliquip exercitation do _______ commodo reprehenderit aute ipsum _________. Irure Lorem et laboris _______ amet cupidatat cupidatat anim __ ut velit mollit consequat ____ tempor. Consectetur est minim _______ nostrud consectetur irure labore _________ irure. Ipsum id Lorem ___ sint voluptate est pariatur __ ad cupidatat et deserunt _____ sit eiusmod deserunt. Consectetur __ fugiat anim do eiusmod _______.
Irure enim occaecat labore ___ qui aliquip reprehenderit amet _____. Deserunt ullamco ex elit _______ ut dolore nisi officia _____ sit occaecat laboris sunt _____. Nisi eu minim cillum ________ aute est cupidatat aliqua ______ aute occaecat ea aliquip ____ amet. Aute mollit dolor __ exercitation irure commodo non ____ consectetur quis amet culpa. ____ ullamco nisi amet qui ____ irure eu. Magna labore _____ quis ex labore id _______ deserunt dolor eiusmod.
<div class="row">
<div _____="___-__-4"&__;
<!-- ___ tabs in format of ____ group -->
<div class="list-group" role="tablist">
<a _____="____-_____-____ list-group-item-action active" href="#list-home" data-bs-toggle="list" ____="___" aria-controls="list-home" id="list-home-list" aria-selected="true">Home</a>
<a _____="____-_____-____ list-group-item-action" href="#list-profile" data-bs-toggle="list" role="tab" ____-________="____-_______" id="list-profile-list" aria-selected="false" tabindex="-1">Profile</a>
<a _____="____-_____-____ list-group-item-action" href="#list-messages" data-bs-toggle="list" role="tab" ____-________="____-________" id="list-messages-list" aria-selected="false" tabindex="-1">Messages</a>
<a _____="____-_____-____ list-group-item-action" href="#list-settings" data-bs-toggle="list" role="tab" ____-________="____-________" id="list-settings-list" aria-selected="false" tabindex="-1">Settings</a>
</div>
</div>
<div class="col-md-8 pt-4 pt-md-0">
<!-- Tab _______ -->
&__;___ class="tab-content">
<div class="tab-pane fade ____ active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
&__;___ class="tab-pane fade" id="list-profile" role="tabpanel" ____-__________="____-_______-____"&__;...&__;/___&__;
<div class="tab-pane fade" id="list-messages" ____="________" aria-labelledby="list-messages-list">...</div>
<div class="tab-pane fade" __="____-________" role="tabpanel" aria-labelledby="list-settings-list">...</div>
</div>
</div>
</div>