List Group
Dokumentasi Bootstrap List GroupBasic example
- Dashboard
- Profile
- Tasks
- Projects
- Members
<!-- List Group -->
<ul class="list-group">
<li class="list-group-item active">
<i class="bi-house list-group-icon"></i> Dashboard
</li>
<li class="list-group-item">
<i class="bi-person list-group-icon"></i> Profile
</li>
<li class="list-group-item">
<i class="bi-list-task list-group-icon"></i> Tasks
</li>
<li class="list-group-item">
<i class="bi-layers list-group-icon"></i> Projects
</li>
<li class="list-group-item">
<i class="bi-people list-group-icon"></i> Members
</li>
</ul>
<!-- End List Group -->
Sizes
- Dashboard
- Profile
- Tasks
- Projects
- Members
<!-- List Group -->
<ul class="list-group list-group-sm">
<li class="list-group-item">
<i class="bi-house list-group-icon"></i> Dashboard
</li>
<li class="list-group-item">
<i class="bi-person list-group-icon"></i> Profile
</li>
<li class="list-group-item">
<i class="bi-list-task list-group-icon"></i> Tasks
</li>
<li class="list-group-item">
<i class="bi-layers list-group-icon"></i> Projects
</li>
<li class="list-group-item">
<i class="bi-people list-group-icon"></i> Members
</li>
</ul>
<!-- End List Group -->
- Dashboard
- Profile
- Tasks
- Projects
- Members
<!-- List Group -->
<ul class="list-group list-group-lg">
<li class="list-group-item">
<i class="bi-house list-group-icon"></i> Dashboard
</li>
<li class="list-group-item">
<i class="bi-person list-group-icon"></i> Profile
</li>
<li class="list-group-item">
<i class="bi-list-task list-group-icon"></i> Tasks
</li>
<li class="list-group-item">
<i class="bi-layers list-group-icon"></i> Projects
</li>
<li class="list-group-item">
<i class="bi-people list-group-icon"></i> Members
</li>
</ul>
<!-- End List Group -->
Links and buttons
<!-- List Group -->
<div class="list-group">
<a class="list-group-item list-group-item-action active" href="#">
<i class="bi-house list-group-icon"></i> Dashboard
</a>
<a class="list-group-item list-group-item-action" href="#">
<i class="bi-person list-group-icon"></i> Profile
</a>
<a class="list-group-item list-group-item-action" href="#">
<i class="bi-list-task list-group-icon"></i> Tasks
</a>
<a class="list-group-item list-group-item-action" href="#">
<i class="bi-layers list-group-icon"></i> Projects
</a>
<a class="list-group-item list-group-item-action" href="#">
<i class="bi-people list-group-icon"></i> Members
</a>
</div>
<!-- End List Group -->
Flush
- Dashboard
- Profile
- Tasks
- Projects
- Members
<!-- List Group -->
<ul class="list-group list-group-flush">
<li class="list-group-item">
<i class="bi-house list-group-icon"></i> Dashboard
</li>
<li class="list-group-item">
<i class="bi-person list-group-icon"></i> Profile
</li>
<li class="list-group-item">
<i class="bi-list-task list-group-icon"></i> Tasks
</li>
<li class="list-group-item">
<i class="bi-layers list-group-icon"></i> Projects
</li>
<li class="list-group-item">
<i class="bi-people list-group-icon"></i> Members
</li>
</ul>
<!-- End List Group -->
Striped
- Dashboard
- Profile
- Tasks
- Projects
- Members
<!-- List Group -->
<ul class="list-group list-group-striped">
<li class="list-group-item">
<i class="bi-house list-group-icon"></i> Dashboard
</li>
<li class="list-group-item">
<i class="bi-person list-group-icon"></i> Profile
</li>
<li class="list-group-item">
<i class="bi-list-task list-group-icon"></i> Tasks
</li>
<li class="list-group-item">
<i class="bi-layers list-group-icon"></i> Projects
</li>
<li class="list-group-item">
<i class="bi-people list-group-icon"></i> Members
</li>
</ul>
<!-- End List Group -->
Numbered
- Cras justo odio
- Cras justo odio
- Cras justo odio
<!-- List Group -->
<ol class="list-group list-group-numbered">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
</ol>
<!-- End List Group -->
- 14SubheadingCras justo odio
- 14SubheadingCras justo odio
- 14SubheadingCras justo odio
<ol class="list-group list-group-numbered">
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-semi-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-semi-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-semi-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
</ol>
Horizontal
- Dashboard
- Profile
- Tasks
<!-- List Group -->
<ul class="list-group list-group-horizontal">
<li class="list-group-item d-sm-flex align-items-sm-center">
<i class="bi-house list-group-icon"></i> Dashboard
</li>
<li class="list-group-item d-sm-flex align-items-sm-center">
<i class="bi-person list-group-icon"></i> Profile
</li>
<li class="list-group-item d-sm-flex align-items-sm-center">
<i class="bi-list-task list-group-icon"></i> Tasks
</li>
<li class="list-group-item">
<i class="bi-layers list-group-icon"></i> Projects
</li>
<li class="list-group-item">
<i class="bi-people list-group-icon"></i> Members
</li>
</ul>
<!-- End List Group -->
With badges
- Dashboard 14
- Profile 2
- Tasks 1
<!-- List Group -->
<ul class="list-group">
<li class="list-group-item d-flex align-items-center">
<i class="bi-house list-group-icon"></i> Dashboard
<span class="badge bg-primary rounded-pill ms-auto">14</span>
</li>
<li class="list-group-item d-flex align-items-center">
<i class="bi-person list-group-icon"></i> Profile
<span class="badge bg-primary rounded-pill ms-auto">2</span>
</li>
<li class="list-group-item d-flex align-items-center">
<i class="bi-list-task list-group-icon"></i> Tasks
<span class="badge bg-primary rounded-pill ms-auto">1</span>
</li>
</ul>
<!-- End List Group -->
Checkboxes and radios
- First checkbox
- Second checkbox
- Third checkbox
- Fourth checkbox
- Fifth checkbox
<!-- List Group -->
<ul class="list-group">
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
First checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Second checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Third checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Fourth checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Fifth checkbox
</li>
</ul>
<!-- End List Group -->
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
First checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Second checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Third checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Fourth checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Fifth checkbox
</label>
</div>
Start bordered
<!-- List Group -->
<ul class="list-group list-group-flush list-group-start-bordered">
<!-- Item -->
<li class="list-group-item">
<a class="list-group-item-action border-primary" href="#">
<div class="row">
<div class="col-sm mb-2 mb-sm-0">
<h2 class="fw-normal mb-1">12:00 - 03:00 <span class="fs-5 text-body text-uppercase">pm</span></h2>
<h5 class="text-inherit mb-0">Weekly overview</h5>
<span class="text-body small">24 May, 2020</span>
</div>
<div class="col-sm-auto align-self-sm-end">
<!-- Avatar Group -->
<div class="avatar-group avatar-group-sm avatar-circle">
<span class="avatar">
<img class="avatar-img" src="https://cdn.btekno.id/templates/nue/img/160x160/img9.jpg" alt="">
</span>
<span class="avatar">
<img class="avatar-img" src="https://cdn.btekno.id/templates/nue/img/160x160/img3.jpg" alt="">
</span>
<span class="avatar avatar-soft-dark">
<span class="avatar-initials">A</span>
</span>
<span class="avatar avatar-soft-info">
<span class="avatar-initials">S</span>
</span>
<span class="avatar">
<img class="avatar-img" src="https://cdn.btekno.id/templates/nue/img/160x160/img5.jpg" alt="">
</span>
</div>
<!-- End Avatar Group -->
</div>
</div>
<!-- End Row -->
</a>
</li>
<!-- End Item -->
<!-- Item -->
<li class="list-group-item">
<a class="list-group-item-action border-info" href="#">
<div class="row">
<div class="col-sm mb-2 mb-sm-0">
<h2 class="fw-normal mb-1">04:30 - 04:50 <span class="fs-5 text-body text-uppercase">pm</span></h2>
<h5 class="text-inherit mb-0">Project tasks</h5>
<span class="text-body small">25 May, 2020</span>
</div>
<div class="col-sm-auto align-self-sm-end">
<!-- Avatar Group -->
<div class="avatar-group avatar-group-sm avatar-circle">
<span class="avatar">
<img class="avatar-img" src="https://cdn.btekno.id/templates/nue/img/160x160/img6.jpg" alt="">
</span>
<span class="avatar">
<img class="avatar-img" src="https://cdn.btekno.id/templates/nue/img/160x160/img7.jpg" alt="">
</span>
<span class="avatar avatar-soft-danger">
<span class="avatar-initials">A</span>
</span>
</div>
<!-- End Avatar Group -->
</div>
</div>
</a>
<!-- End Row -->
</li>
<!-- Item -->
<li class="list-group-item">
<a class="list-group-item-action border-danger" href="#">
<div class="row">
<div class="col-sm mb-2 mb-sm-0">
<h2 class="fw-normal mb-1">12:00 - 03:00 <span class="fs-5 text-body text-uppercase">pm</span></h2>
<h5 class="text-inherit mb-0">Monthly reports</h5>
<span class="text-body small">27 May, 2020</span>
</div>
<div class="col-sm-auto align-self-sm-end">
<!-- Avatar Group -->
<div class="avatar-group avatar-group-sm avatar-circle">
<span class="avatar">
<img class="avatar-img" src="https://cdn.btekno.id/templates/nue/img/160x160/img5.jpg" alt="">
</span>
<span class="avatar avatar-soft-dark">
<span class="avatar-initials">B</span>
</span>
<span class="avatar">
<img class="avatar-img" src="https://cdn.btekno.id/templates/nue/img/160x160/img8.jpg" alt="">
</span>
<span class="avatar">
<img class="avatar-img" src="https://cdn.btekno.id/templates/nue/img/160x160/img9.jpg" alt="">
</span>
</div>
<!-- End Avatar Group -->
</div>
</div>
<!-- End Row -->
</a>
</li>
<!-- End Item -->
<!-- Item -->
<li class="list-group-item">
<a class="list-group-item-action border-warning" href="#">
<div class="row">
<div class="col-sm mb-2 mb-sm-0">
<h2 class="fw-normal mb-1">02:00 - 03:00 <span class="fs-5 text-body text-uppercase">pm</span></h2>
<h5 class="text-inherit mb-0">Monthly reports to the client</h5>
<span class="text-body small">29 May, 2020</span>
</div>
<div class="col-sm-auto align-self-sm-end">
<!-- Avatar Group -->
<div class="avatar-group avatar-group-sm avatar-circle">
<span class="avatar">
<img class="avatar-img" src="https://cdn.btekno.id/templates/nue/img/160x160/img5.jpg" alt="">
</span>
<span class="avatar avatar-soft-dark">
<span class="avatar-initials">B</span>
</span>
<span class="avatar">
<img class="avatar-img" src="https://cdn.btekno.id/templates/nue/img/160x160/img8.jpg" alt="">
</span>
<span class="avatar">
<img class="avatar-img" src="https://cdn.btekno.id/templates/nue/img/160x160/img9.jpg" alt="">
</span>
</div>
<!-- End Avatar Group -->
</div>
</div>
<!-- End Row -->
</a>
</li>
<!-- End Item -->
</ul>
<!-- End List Group -->