List
- An item
- A second item
- A third item
- A fourth item
- And a fifth one
<div class="card">
<div class="card-header">
<h5>Default lists</h5>
</div>
<div class="card-body">
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
<h5>Active items</h5>
</div>
<div class="card-body">
<ul class="list-group list-items-active">
<li class="list-group-item list-active active" aria-current="true"><i
class="ti ti-arrow-badge-right"></i> An active item</li>
<li class="list-group-item list-active"><i class="ti ti-arrow-badge-right"></i> A second item</li>
<li class="list-group-item list-active"><i class="ti ti-arrow-badge-right"></i> A third item</li>
<li class="list-group-item list-active"><i class="ti ti-arrow-badge-right"></i> A fourth item</li>
<li class="list-group-item list-active"><i class="ti ti-arrow-badge-right"></i> And a fifth one
</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
<h5>Links</h5>
</div>
<div class="card-body gap-2 d-flex flex-column">
<div class="list-group list-link ">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
<i class="ti ti-unlink"></i> The current link item
</a>
<a href="#" class="list-group-item list-group-item-action"><i class="ti ti-unlink"></i> A second
link item</a>
<a href="#" class="list-group-item list-group-item-action"><i class="ti ti-unlink"></i> A third
link item</a>
<a href="#" class="list-group-item list-group-item-action"><i class="ti ti-unlink"></i> A fourth
link item</a>
<a class="list-group-item list-group-item-action disabled"><i class="ti ti-unlink"></i> A disabled
link item</a>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5>buttons</h5>
</div>
<div class="card-body gap-2 d-flex flex-column">
<div class="list-group list-button">
<button type="button" class="list-group-item list-group-item-action active" aria-current="true">
<i class="ti ti-arrow-autofit-right"></i> The current button
</button>
<button type="button" class="list-group-item list-group-item-action"><i
class="ti ti-arrow-autofit-right"></i> A second button item</button>
<button type="button" class="list-group-item list-group-item-action"><i
class="ti ti-arrow-autofit-right"></i> A third button item</button>
<button type="button" class="list-group-item list-group-item-action"><i
class="ti ti-arrow-autofit-right"></i> A fourth button item</button>
<button type="button" class="list-group-item list-group-item-action" disabled><i
class="ti ti-arrow-autofit-right"></i> A disabled button
item</button>
</div>
</div>
</div>
- An item
- A second item
- A third item
- A fourth item
- And a fifth one
<div class="card">
<div class="card-header">
<h5>Flush</h5>
</div>
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item"><i class="ti ti-transition-right"></i> An item
</li>
<li class="list-group-item"><i class="ti ti-transition-right"></i> A second
item</li>
<li class="list-group-item"><i class="ti ti-transition-right"></i> A third
item</li>
<li class="list-group-item"><i class="ti ti-transition-right"></i> A fourth
item</li>
<li class="list-group-item"><i class="ti ti-transition-right"></i> And a
fifth one</li>
</ul>
</div>
</div>
-
Subheading7
-
Subheading9
-
Subheading11
<div class="card">
<div class="card-header">
<h5>Numbered</h5>
</div>
<div class="card-body">
<ol class="list-group list-group-numbered p-1">
<li class="list-group-item d-flex justify-content-between align-items-start text-primary">
<div class="ms-2 w-100">
<div class="w-100 d-flex justify-content-between align-items-center">
<div class="fw-bold me-1">Subheading</div>
<span class="badge text-light-primary rounded-pill">7</span>
</div>
Content for list item
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start text-secondary">
<div class="ms-2 w-100">
<div class="w-100 d-flex justify-content-between align-items-center">
<div class="fw-bold me-1">Subheading</div>
<span class="badge text-light-secondary rounded-pill">9</span>
</div>
Content for list item
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start text-success">
<div class="ms-2 w-100">
<div class="w-100 d-flex justify-content-between align-items-center">
<div class="fw-bold me-1">Subheading</div>
<span class="badge text-light-success rounded-pill ">11</span>
</div>
Content for list item
</div>
</li>
</ol>
</div>
</div>
<div class="card">
<div class="card-header">
<h5>radios</h5>
</div>
<div class="card-body ">
<ul class="list-group d-flex flex-column">
<li class="radio-wrapper ">
<label class="check-box">
<input type="radio" name="radio-group1">
<span class="radiomark outline-primary"></span>
<span class="text-primary me-1">Primary</span>
</label>
</li>
<li class="radio-wrapper ">
<label class="check-box">
<input type="radio" name="radio-group1">
<span class="radiomark outline-secondary"></span>
<span class="text-secondary me-1">Secondary</span>
</label>
</li>
<li class="radio-wrapper ">
<label class="check-box">
<input type="radio" name="radio-group1">
<span class="radiomark outline-success"></span>
<span class="text-success me-1">Success</span>
</label>
</li>
<li class="radio-wrapper ">
<label class="check-box">
<input type="radio" name="radio-group1">
<span class="radiomark outline-danger"></span>
<span class="text-danger me-1">Danger</span>
</label>
</li>
<li class="radio-wrapper ">
<label class="check-box">
<input type="radio" name="radio-group1">
<span class="radiomark outline-warning"></span>
<span class="text-warning me-1">Warning</span>
</label>
</li>
<li class="radio-wrapper ">
<label class="check-box">
<input type="radio" name="radio-group1">
<span class="radiomark outline-info"></span>
<span class="text-info me-1">Info</span>
</label>
</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
<h5>Checkboxes</h5>
</div>
<div class="card-body ">
<ul class="list-group d-flex flex-column ">
<li class="checkbox-wrapper">
<label class="check-box">
<input type="checkbox">
<span class="checkmark outline-primary"></span>
<span class="text-primary me-1">Primary</span>
</label>
</li>
<li class="checkbox-wrapper ">
<label class="check-box">
<input type="checkbox">
<span class="checkmark outline-secondary"></span>
<span class="text-secondary me-1">Secondary</span>
</label>
</li>
<li class="checkbox-wrapper ">
<label class="check-box">
<input type="checkbox">
<span class="checkmark outline-success"></span>
<span class="text-success me-1">Success</span>
</label>
</li>
<li class="checkbox-wrapper ">
<label class="check-box">
<input type="checkbox">
<span class="checkmark outline-danger"></span>
<span class="text-danger me-1">Danger</span>
</label>
</li>
<li class="checkbox-wrapper ">
<label class="check-box">
<input type="checkbox">
<span class="checkmark outline-warning"></span>
<span class="text-warning me-1">Warning</span>
</label>
</li>
<li class="checkbox-wrapper ">
<label class="check-box">
<input type="checkbox">
<span class="checkmark outline-info"></span>
<span class="text-info me-1">Info</span>
</label>
</li>
</ul>
</div>
</div>
- An item
- A second item
- A third item
- An item
- A second item
- A third item
- An item
- A second item
- A third item
- An item
- A second item
- A third item
<div class="card">
<div class="card-header">
<h5>Horizontal</h5>
</div>
<div class="card-body list-horizontal gap-2 d-flex flex-column align-items-center">
<ul class="list-group list-group-horizontal">
<li class="list-group-item b-1-primary bg-light-primary">An item</li>
<li class="list-group-item b-1-primary bg-light-primary">A second item</li>
<li class="list-group-item b-1-primary bg-light-primary">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm ">
<li class="list-group-item b-r-1 b-1-secondary">An item</li>
<li class="list-group-item b-r-1 b-1-secondary">A second item</li>
<li class="list-group-item b-r-1 b-1-secondary">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg ">
<li class="list-group-item list-radius-left-horizontal b-1-success">An item
</li>
<li class="list-group-item b-1-success">A second item</li>
<li class="list-group-item list-radius-right-horizontal b-1-success">A third
item</li>
</ul>
<ul class="list-group list-group-horizontal-md ">
<li class="list-group-item b-1-danger">An item</li>
<li class="list-group-item b-1-danger">A second item</li>
<li class="list-group-item b-1-danger">A third item</li>
</ul>
</div>
</div>
- A simple default list group item
- A simple primary list group item
- A simple secondary list group item
- A simple success list group item
- A simple danger list group item
- A simple warning list group item
- A simple info list group item
- A simple light list group item
- A simple dark list group item
<div class="card">
<div class="card-header">
<h5>Variants</h5>
</div>
<div class="card-body">
<ul class="list-group">
<li class="list-group-item">A simple default list group item</li>
<li class="list-group-item text-light-primary">A simple primary list group
item</li>
<li class="list-group-item text-light-secondary">A simple secondary list
group item</li>
<li class="list-group-item text-light-success">A simple success list group
item</li>
<li class="list-group-item text-light-danger">A simple danger list group
item</li>
<li class="list-group-item text-light-warning">A simple warning list group
item</li>
<li class="list-group-item text-light-info">A simple info list group item
</li>
<li class="list-group-item text-light-light">A simple light list group item
</li>
<li class="list-group-item text-light-dark">A simple dark list group item
</li>
</ul>
</div>
</div>
Custom Content
-
Allen Rollins
Allen@509
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque nam accusantium ipsum?
3 days ago -
3
Holly Mckenzie
Holly@567
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque nam accusantium ipsum?
3 days ago -
Justin Park
Park@001
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque nam accusantium ipsum?
3 days ago
Contacts
-
Leland Franecki
He wanted her job, and it would be easy enough.. -
Rafael Veum
He didn't want to go out on such a night but... -
Ray Schamberger
The girl shouldn't have been sacked but if he said.. -
Mack Gutkowski
Everything about her was a lie -
Mack Gutkowski
She had followed the woman for days and at last her.. -
Lee Rosenbaum
He had kept their mother alive in their thoughts..
People
Contacts List

Omar Krajcik
+3584227649850
(UAS)

Rudy Bode
+3587394408149
(UAS)

Charlie Christiansen
+18402727121
(UAS)

Lance Schiller
+16286413791
(Drivers,New zealand)

Troy Cartwright
+18607148019
(UAS)

Israel Kshlerin
+16805796236
(Drivers,New zealand)