SCIFI - Codeigniter Bootstrap 5 Premium Admin & Dashboard Template

Vertical

Horizontal

Menu Click

Menu Hover

Icon Click

Icon Hover

Default Menu

Closed Menu

Icon Text

Icon Overlay

Detached

Double Menu

Basic List

Katelynn Julie
Samantha Mery
Juliana Pena
Adam Smith
Farhaan Amhed

<ul class="list-group">
    <li class="list-group-item">
        <div class="d-flex align-items-center">
            <span class="avatar avatar-sm">
                <img src="https://codeigniter.spruko.com/scifi/scifi/assets/images/faces/1.jpg" alt="img">
            </span>
            <div class="ms-2 fw-medium">
            Katelynn Julie
            </div>
        </div>
    </li>
    <li class="list-group-item">
        <div class="d-flex align-items-center">
            <span class="avatar avatar-sm">
                <img src="https://codeigniter.spruko.com/scifi/scifi/assets/images/faces/3.jpg" alt="img">
            </span>
            <div class="ms-2 fw-medium">
                Samantha Mery
            </div>
        </div>
    </li>
    <li class="list-group-item">
        <div class="d-flex align-items-center">
            <span class="avatar avatar-sm">
                <img src="https://codeigniter.spruko.com/scifi/scifi/assets/images/faces/6.jpg" alt="img">
            </span>
            <div class="ms-2 fw-medium">
                Juliana Pena
            </div>
        </div>
    </li>
    <li class="list-group-item">
        <div class="d-flex align-items-center">
            <span class="avatar avatar-sm">
                <img src="https://codeigniter.spruko.com/scifi/scifi/assets/images/faces/15.jpg" alt="img">
            </span>
            <div class="ms-2 fw-medium">
                Adam Smith
            </div>
        </div>
    </li>
    <li class="list-group-item">
        <div class="d-flex align-items-center">
            <span class="avatar avatar-sm">
                <img src="https://codeigniter.spruko.com/scifi/scifi/assets/images/faces/13.jpg" alt="img">
            </span>
            <div class="ms-2 fw-medium">
                Farhaan Amhed
            </div>
        </div>
    </li>
</ul>

Active items

Home
Notifications
Sent Messages
New Requests
Deleted Messages

<ul class="list-group">
    <li class="list-group-item active" aria-current="true">
        <div class="d-flex align-items-center">
            <div>
                <span class="fs-15">
                    <i class="bi bi-house-door"></i>
                </span>
            </div>
            <div class="ms-2">
                Home
            </div>
        </div>
    </li>
    <li class="list-group-item">
        <div class="d-flex align-items-center">
            <div>
                <span class="fs-15">
                    <i class="bi bi-bell"></i>
                </span>
            </div>
            <div class="ms-2">
                Notifications
            </div>
        </div>
    </li>
    <li class="list-group-item">
        <div class="d-flex align-items-center">
            <div>
                <span class="fs-15">
                    <i class="bi bi-gift"></i>
                </span>
            </div>
            <div class="ms-2">
                Sent Messages
            </div>
        </div>
    </li>
    <li class="list-group-item">
        <div class="d-flex align-items-center">
            <div>
                <span class="fs-15">
                    <i class="bi bi-person"></i>
                </span>
            </div>
            <div class="ms-2">
                New Requests
            </div>
        </div>
    </li>
    <li class="list-group-item">
        <div class="d-flex align-items-center">
            <div>
                <span class="fs-15">
                    <i class="bi bi-trash3"></i>
                </span>
            </div>
            <div class="ms-2">
                Deleted Messages
            </div>
        </div>
    </li>
</ul>

Disabled items

A disabled item meant to be disabled
Simply dummy text of the printing
There are many variations of passages
All the Lorem Ipsum generators
Written in 45 BC. This book is a treatise on the theory

<ul class="list-group">
    <li class="list-group-item disabled" aria-disabled="true">A disabled item meant to be disabled
    </li>
    <li class="list-group-item">Simply dummy text of the printing</li>
    <li class="list-group-item">There are many variations of passages</li>
    <li class="list-group-item">All the Lorem Ipsum generators</li>
    <li class="list-group-item">Written in 45 BC. This book is a treatise on the theory</li>
</ul>

Flush

Asish Trivedhi(+1023-84534)
Alezander Russo(+7546-12342)
Karem Smith(+9944-56632)
Brinda Lusy(+1023-34323)
Kamala Harris(+91-63421)

<ul class="list-group list-group-flush">
    <li class="list-group-item fw-medium"><i class="bi bi-envelope align-middle me-2 text-muted"></i>Asish Trivedhi<span class="ms-1 text-muted fw-normal d-inline-block">(+1023-84534)</span></li>
    <li class="list-group-item fw-medium"><i class="bi bi-tiktok align-middle me-2 text-muted"></i>Alezander Russo<span class="ms-1 text-muted fw-normal d-inline-block">(+7546-12342)</span></li>
    <li class="list-group-item fw-medium"><i class="bi bi-whatsapp align-middle me-2 text-muted"></i>Karem Smith<span class="ms-1 text-muted fw-normal d-inline-block">(+9944-56632)</span></li>
    <li class="list-group-item fw-medium"><i class="bi bi-facebook align-middle me-2 text-muted"></i>Brinda Lusy<span class="ms-1 text-muted fw-normal d-inline-block">(+1023-34323)</span></li>
    <li class="list-group-item fw-medium"><i class="bi bi-instagram align-middle me-2 text-muted"></i>Kamala Harris<span class="ms-1 text-muted fw-normal d-inline-block">(+91-63421)</span></li>
</ul>

Links

<div class="list-group">
    <a href="javascript:void(0);" class="list-group-item list-group-item-action active"
        aria-current="true">
        <div class="d-flex align-items-center">
            <div>
                <span class="avatar avatar-xs bg-white text-default avatar-rounded">
                    C
                </span>
            </div>
            <div class="ms-2">California</div>
        </div>
    </a>
    <a href="javascript:void(0);" class="list-group-item list-group-item-action">
        <div class="d-flex align-items-center">
            <div>
                <span class="avatar avatar-xs bg-secondary avatar-rounded">
                    N
                </span>
            </div>
            <div class="ms-2">New Jersey</div>
        </div>
    </a>
    <a href="javascript:void(0);" class="list-group-item list-group-item-action">
        <div class="d-flex align-items-center">
            <div>
                <span class="avatar avatar-xs bg-info avatar-rounded">
                    L
                </span>
            </div>
            <div class="ms-2">Los Angeles</div>
        </div>
    </a>
    <a href="javascript:void(0);" class="list-group-item list-group-item-action">
        <div class="d-flex align-items-center">
            <div>
                <span class="avatar avatar-xs bg-warning avatar-rounded">
                    M
                </span>
            </div>
            <div class="ms-2">Miami Florida</div>
        </div>
    </a>
    <a class="list-group-item list-group-item-action disabled">
        <div class="d-flex align-items-center">
            <div>
                <span class="avatar avatar-xs bg-success avatar-rounded">
                    W
                </span>
            </div>
            <div class="ms-2">Washington D.C</div>
        </div>
    </a>
</div>

buttons

<div class="list-group">
    <button type="button" class="list-group-item list-group-item-action active" aria-current="true">Simply dummy text of the printing<span class="badge float-end bg-primary">243</span></button>
    <button type="button" class="list-group-item list-group-item-action">There are many variations of passages<span class="badge float-end bg-secondary-transparent">35</span></button>
    <button type="button" class="list-group-item list-group-item-action">All the Lorem Ipsum generators<span class="badge float-end bg-info-transparent">132</span></button>
    <button type="button" class="list-group-item list-group-item-action">All the Lorem Ipsum generators<span class="badge float-end bg-success-transparent">2525</span></button>
    <button type="button" class="list-group-item list-group-item-action" disabled>A disabled item meant to be disabled<span class="badge float-end bg-danger-transparent">21</span></button>
</div>

Solid Colored Lists

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

<ul class="list-group">
    <li class="list-group-item">A simple default list group item</li>

    <li class="list-group-item list-item-solid-primary">A simple primary list
        group
        item</li>
    <li class="list-group-item list-item-solid-secondary">A simple secondary
        list
        group item</li>
    <li class="list-group-item list-item-solid-success">A simple success list
        group
        item</li>
    <li class="list-group-item list-item-solid-danger">A simple danger list
        group
        item</li>
    <li class="list-group-item list-item-solid-warning">A simple warning list
        group
        item</li>
    <li class="list-group-item list-item-solid-info">A simple info list group
        item
    </li>
    <li class="list-group-item list-item-solid-light">A simple light list group
        item
    </li>
    <li class="list-group-item list-item-solid-dark text-white">A simple dark list group
        item
    </li>
</ul>

Custom content

Web page editors now use Lorem Ipsum?

3 days ago

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.

24,Nov 2023.

Angela McClintock, a Latin professor?

4 hrs ago

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature.

30,Nov 2023.

It uses a dictionary of over 200 Latin words?

15 hrs ago

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

4,Nov 2023.

The standard Lorem Ipsum used since the 1500s?

45 mins ago

All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.

28,Oct 2023.

<div class="list-group">
    <a href="javascript:void(0);" class="list-group-item list-group-item-action active"
        aria-current="true">
        <div class="d-flex w-100 justify-content-between">
            <h6 class="mb-1 fw-medium">Web page editors now use Lorem Ipsum?</h6>
            <small>3 days ago</small>
        </div>
        <p class="mb-1">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</p>
        <small>24,Nov 2023.</small>
    </a>
    <a href="javascript:void(0);" class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
            <h6 class="mb-1 fw-medium">Angela McClintock, a Latin professor?</h6>
            <small class="text-muted">4 hrs ago</small>
        </div>
        <p class="mb-1">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature.</p>
        <small class="text-muted">30,Nov 2023.</small>
    </a>
    <a href="javascript:void(0);" class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
            <h6 class="mb-1 fw-medium">It uses a dictionary of over 200 Latin words?</h6>
            <small class="text-muted">15 hrs ago</small>
        </div>
        <p class="mb-1">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
        <small class="text-muted">4,Nov 2023.</small>
    </a>
    <a href="javascript:void(0);" class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
            <h6 class="mb-1 fw-medium">The standard Lorem Ipsum used since the 1500s?</h6>
            <small class="text-muted">45 mins ago</small>
        </div>
        <p class="mb-1">All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
        <small class="text-muted">28,Oct 2023.</small>
    </a>
</div>

Contextual classes

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

<ul class="list-group">
    <li class="list-group-item">A simple default list group item</li>

    <li class="list-group-item list-group-item-primary">A simple primary list
        group
        item</li>
    <li class="list-group-item list-group-item-secondary">A simple secondary
        list
        group item</li>
    <li class="list-group-item list-group-item-success">A simple success list
        group
        item</li>
    <li class="list-group-item list-group-item-danger">A simple danger list
        group
        item</li>
    <li class="list-group-item list-group-item-warning">A simple warning list
        group
        item</li>
    <li class="list-group-item list-group-item-info">A simple info list group
        item
    </li>
    <li class="list-group-item list-group-item-light">A simple light list group
        item
    </li>
    <li class="list-group-item list-group-item-dark">A simple dark list group
        item
    </li>
</ul>

Contextual classes with hover styles

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="list-group">
    <a href="javascript:void(0);" class="list-group-item list-group-item-action">A simple default
        list
        group item</a>

    <a href="javascript:void(0);"
        class="list-group-item list-group-item-action list-group-item-primary">A
        simple primary list group item</a>
    <a href="javascript:void(0);"
        class="list-group-item list-group-item-action list-group-item-secondary">A
        simple secondary list group item</a>
    <a href="javascript:void(0);"
        class="list-group-item list-group-item-action list-group-item-success">A
        simple success list group item</a>
    <a href="javascript:void(0);"
        class="list-group-item list-group-item-action list-group-item-danger">A
        simple danger list group item</a>
    <a href="javascript:void(0);"
        class="list-group-item list-group-item-action list-group-item-warning">A
        simple warning list group item</a>
    <a href="javascript:void(0);"
        class="list-group-item list-group-item-action list-group-item-info">A
        simple
        info list group item</a>
    <a href="javascript:void(0);"
        class="list-group-item list-group-item-action list-group-item-light">A
        simple light list group item</a>
    <a href="javascript:void(0);"
        class="list-group-item list-group-item-action list-group-item-dark">A
        simple
        dark list group item</a>
</div>

Sub headings

What Happened?
Many experts have recently suggested may exist.
32 Views
It Was Amazing!
His idea involved taking red.
52 Views
News Is A Great Weapon.
News can influence in many ways.
1,204 Views
majority have suffered.
If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything.
14 Views

<ol class="list-group list-group-numbered">
    <li class="list-group-item d-sm-flex justify-content-between align-items-start">
        <div class="ms-2 me-auto text-muted">
            <div class="fw-medium fs-14 text-default">What Happened?</div>
            Many experts have recently suggested may exist.
        </div>
        <span class="badge bg-primary-transparent">32 Views</span>
    </li>
    <li class="list-group-item d-sm-flex justify-content-between align-items-start">
        <div class="ms-2 me-auto text-muted">
            <div class="fw-medium fs-14 text-default">It Was Amazing!</div>
            His idea involved taking red.
        </div>
        <span class="badge bg-secondary-transparent">52 Views</span>
    </li>
    <li class="list-group-item d-sm-flex justify-content-between align-items-start">
        <div class="ms-2 me-auto text-muted">
            <div class="fw-medium fs-14 text-default">News Is A Great Weapon.</div>
            News can influence in many ways.
        </div>
        <span class="badge bg-success-transparent">1,204 Views</span>
    </li>
    <li class="list-group-item d-sm-flex justify-content-between align-items-start">
        <div class="ms-2 me-auto text-muted">
            <div class="fw-medium fs-14 text-default">majority have suffered.</div>
            If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything.
        </div>
        <span class="badge bg-danger-transparent">14 Views</span>
    </li>
</ol>

Numbered Lists

Simply dummy text of the printing.
There are many variations of passages.
All the Lorem Ipsum generators.
Written in 45 BC. This book is a treatise on the theory.
Randomised words which don't look.
Always free from repetition, injected humour.

<ol class="list-group list-group-numbered">
    <li class="list-group-item">Simply dummy text of the printing.</li>
    <li class="list-group-item">There are many variations of passages.</li>
    <li class="list-group-item">All the Lorem Ipsum generators.</li>
    <li class="list-group-item">Written in 45 BC. This book is a treatise on the theory.</li>
    <li class="list-group-item">Randomised words which don't look.</li>
    <li class="list-group-item">Always free from repetition, injected humour.</li>
</ol>

List With Checkboxes

Accurate information at any given point.
Hearing the information and responding.
Setting up and customizing your own sales.
New Admin Launched.
To maximize profits and improve productivity.
To have a complete 360° overview of sales information, having.

<ul class="list-group">
    <li class="list-group-item">
        <input class="form-check-input me-1 fw-medium" type="checkbox" value=""
            aria-label="..." checked>
            Accurate information at any given point.
    </li>
    <li class="list-group-item">
        <input class="form-check-input me-1 fw-medium" type="checkbox" value=""
            aria-label="...">
            Hearing the information and responding.
    </li>
    <li class="list-group-item">
        <input class="form-check-input me-1 fw-medium" type="checkbox" value=""
            aria-label="..." checked>
            Setting up and customizing your own sales.
    </li>
    <li class="list-group-item">
        <input class="form-check-input me-1 fw-medium" type="checkbox" value=""
            aria-label="..." checked>
            New Admin Launched.
    </li>
    <li class="list-group-item">
        <input class="form-check-input me-1 fw-medium" type="checkbox" value=""
            aria-label="...">
            To maximize profits and improve productivity.
    </li>
    <li class="list-group-item">
        <input class="form-check-input me-1 fw-medium" type="checkbox" value=""
            aria-label="...">
            To have a complete 360° overview of sales information, having.
    </li>
</ul>

List With Radios

Accurate information at any given point. Hearing the information and responding. Setting up and customizing your own sales. New Admin Launched. To maximize profits and improve productivity. To have a complete 360° overview of sales information, having.

<div class="list-group">
    <label class="list-group-item">
        <input class="form-check-input me-1" type="radio" value=""
            name="list-radio" checked>
            Accurate information at any given point.
    </label>
    <label class="list-group-item">
        <input class="form-check-input me-1" type="radio" value=""
            name="list-radio" checked>
            Hearing the information and responding.
    </label>
    <label class="list-group-item">
        <input class="form-check-input me-1" type="radio" value=""
            name="list-radio" checked>
            Setting up and customizing your own sales.
    </label>
    <label class="list-group-item">
        <input class="form-check-input me-1" type="radio" value=""
            name="list-radio">
            New Admin Launched.
    </label>
    <label class="list-group-item">
        <input class="form-check-input me-1" type="radio" value=""
            name="list-radio">
            To maximize profits and improve productivity.
    </label>
    <label class="list-group-item">
        <input class="form-check-input me-1" type="radio" value=""
            name="list-radio">
            To have a complete 360° overview of sales information, having.
    </label>
</div>

List With badges

Groceries Available
Furniture Buy
Beauty 32
Books New
Toys Hot
Mobiles Sold Out

<ul class="list-group">
    <li
        class="list-group-item d-flex justify-content-between align-items-center fw-medium">
        Grocies
        <span class="badge bg-primary">Available</span>
    </li>
    <li
        class="list-group-item d-flex justify-content-between align-items-center fw-medium">
        Furniture
        <span class="badge bg-secondary">Buy</span>
    </li>
    <li
        class="list-group-item d-flex justify-content-between align-items-center fw-medium">
        Beauty
        <span class="badge bg-danger rounded-pill">32</span>
    </li>
    <li
        class="list-group-item d-flex justify-content-between align-items-center fw-medium">
        Books
        <span class="badge bg-light text-default">New</span>
    </li>
    <li
        class="list-group-item d-flex justify-content-between align-items-center fw-medium">
        Toys
        <span class="badge bg-info-gradient">Hot</span>
    </li>
    <li
        class="list-group-item d-flex justify-content-between align-items-center fw-medium">
        Mobiles
        <span class="badge bg-warning">Sold Out</span>
    </li>
</ul>

Horizontal

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

An item
A second item
A third item

An item
A second item
A third item

<ul class="mb-3 list-group list-group-horizontal">
    <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>
</ul>
<ul class="mb-3 list-group list-group-horizontal-sm">
    <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>
</ul>
<ul class="mb-3 list-group list-group-horizontal-md">
    <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>
</ul>
<ul class="mb-3 list-group list-group-horizontal-lg">
    <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>
</ul>
<ul class="mb-3 list-group list-group-horizontal-xl">
    <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>
</ul>
<ul class="mb-3 list-group list-group-horizontal-xxl">
    <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>
</ul>

Switcher

Web page editors now use Lorem Ipsum?

Angela McClintock, a Latin professor?

It uses a dictionary of over 200 Latin words?

The standard Lorem Ipsum used since the 1500s?

Shortcuts

Elizabeth Ava2

George Rhys1

Bethany Isla2

Margaret Emma1

Michael Souris1

Olivia Lily1

Smith Brown2

Wilson Li24

Jones Morton3

White Lee1

Wilfrid Price3

Jasmin O'Kon

River Gleichner

Saul Goodmate1

Edgardo Huel

Find out more !

Notifications :

App :

Remaiders :

This Is Not You're Looking For?