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
A
B
Tonye Brikner
She was beginning to realise how far down in her
memory she'd buried her teenage years
C
Delaney Cairney
On the Livingstone estate, flies were sometimes the
first indication that someone had died
Tonia Colqueran
He was successful, attractive and charming but people
of that age always had secrets
D
E
F
G
H
I
J
K
Arlan Kilrow
On the Livingstone estate, flies were sometimes the
first indication that someone had died
L
M
Crystie Mingaud
An expert in utilizing various design tools and
software to create stunning web layouts
Brinn Moses
Someone who stays updated with the latest design
trends and technologies in the web design industry
Elston Muffett
An individual who ensures that websites are responsive
and compatible across different devices and browsers.
N
O
Roseline OIlier
A skilled individual who ensures that websites are
responsive and optimized for different devices and screen sizes
P
Johannes Paternoster
"It's all bills, bills, bills. That's my only answer
now," he said, pointing to
Q
R
S
Wilburt Siegertsz
A developer who specializes in React is commonly
referred to as a React developer.
Kellie Skingley
Someone who has expertise in developing applications
using the React framework is known as a React developer.
T
U
V
Netti Vondrasek
A creative individual who combines technical knowledge
and artistic skills to design and build websites
W
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)