Bootstrap List Media
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Code Here:
<ul class="list-group">
<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>
Linked Items
Code Here
<div class="list-group">
<a href="javascript:void(0)" class="list-group-item active">Cras justo odio</a>
<a href="javascript:void(0)" class="list-group-item">Dapibus ac facilisis in</a>
<a href="javascript:void(0)" class="list-group-item">Morbi leo
risus</a>
<a href="javascript:void(0)" class="list-group-item">Porta ac
consectetur ac</a>
<a href="javascript:void(0)" class="list-group-item">Vestibulum at eros</a>
</div>
With Badges
- Cras justo odio 6
- Dapibus ac facilisis in
- Morbi leo risus 3
- Porta ac consectetur ac 10
- Vestibulum at eros
Code Here
<ul class="list-group list-group-full">
<li class="list-group-item d-flex"> Cras justo odio <span
class="badge bg-info ms-auto">6</span></li>
<li class="list-group-item d-flex"> Dapibus ac facilisis in </li>
<li class="list-group-item d-flex"> Morbi leo risus <span
class="badge bg-danger ms-auto">3</span></li>
<li class="list-group-item d-flex active"> Porta ac consectetur ac <span
class="badge bg-success ms-auto">10</span></li>
<li class="list-group-item"> Vestibulum at eros </li>
</ul>
Tabs JavaScript behavior
Code Here
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active"
id="list-home-list" data-bs-toggle="list" href="#list-home"
role="tab" aria-controls="home">Home</a>
<a class="list-group-item list-group-item-action"
id="list-profile-list" data-bs-toggle="list" href="#list-profile"
role="tab" aria-controls="profile">Profile</a>
<a class="list-group-item list-group-item-action"
id="list-messages-list" data-bs-toggle="list" href="#list-messages"
role="tab" aria-controls="messages">Messages</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active text-justify" id="list-home"
role="tabpanel" aria-labelledby="list-home-list">
Irure enim occaecat labore sit qui aliquip reprehenderit amet
velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia
magna sit occaecat laboris sunt dolor.
</div>
<div class="tab-pane fade text-justify" id="list-profile" role="tabpanel"
aria-labelledby="list-profile-list">
Irure enim occaecat labore sit qui aliquip reprehenderit amet
velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia
magna sit occaecat laboris sunt dolor.
</div>
<div class="tab-pane fade text-justify" id="list-messages" role="tabpanel"
aria-labelledby="list-messages-list">
Irure enim occaecat labore sit qui aliquip reprehenderit amet
velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia
magna sit occaecat laboris sunt dolor.
</div>
</div>
</div>
</div>