SCIFI - Bootstrap 5 Premium Admin & Dashboard Template

Avatars

<span class="avatar me-2 avatar-radius-0">
    <img src="../assets/images/faces/1.jpg" alt="img">
</span>
<span class="avatar me-2">
    <img src="../assets/images/faces/2.jpg" alt="img">
</span>
<span class="avatar me-2 avatar-rounded">
    <img src="../assets/images/faces/3.jpg" alt="img">
</span>

Avatar Sizes

Avatars of different sizes

<span class="avatar avatar-xs me-2">
    <img src="../assets/images/faces/4.jpg" alt="img">
</span>
<span class="avatar avatar-sm me-2">
    <img src="../assets/images/faces/5.jpg" alt="img">
</span>
<span class="avatar avatar-md me-2">
    <img src="../assets/images/faces/6.jpg" alt="img">
</span>
<span class="avatar avatar-lg me-2">
    <img src="../assets/images/faces/7.jpg" alt="img">
</span>
<span class="avatar avatar-xl me-2">
    <img src="../assets/images/faces/8.jpg" alt="img">
</span>
<span class="avatar avatar-xxl me-2">
    <img src="../assets/images/faces/9.jpg" alt="img">
</span>

Avatar With Icons

Avatar contains icons to perform respective action.

<span class="avatar avatar-xs me-2 avatar-rounded">
    <img src="../assets/images/faces/2.jpg" alt="img">
    <a href="javascript:void(0);" class="badge bg-success rounded-pill avatar-badge"><i class="fe fe-camera"></i></a>
</span>
<span class="avatar avatar-sm me-2 avatar-rounded">
    <img src="../assets/images/faces/3.jpg" alt="img">
    <a href="javascript:void(0);" class="badge rounded-pill bg-secondary avatar-badge"><i class="fe fe-edit"></i></a>
</span>
<span class="avatar avatar-md me-2 avatar-rounded">
    <img src="../assets/images/faces/14.jpg" alt="img">
    <a href="javascript:void(0);" class="badge rounded-pill bg-warning avatar-badge"><i class="fe fe-plus"></i></a>
</span>
<span class="avatar avatar-lg me-2 avatar-rounded">
    <img src="../assets/images/faces/13.jpg" alt="img">
    <a href="javascript:void(0);" class="badge rounded-pill bg-info avatar-badge"><i class="fe fe-edit"></i></a>
</span>
<span class="avatar avatar-xl me-2 avatar-rounded">
    <img src="../assets/images/faces/15.jpg" alt="img">
    <a href="javascript:void(0);" class="badge rounded-pill bg-success avatar-badge"><i class="fe fe-camera"></i></a>
</span>
<span class="avatar avatar-xxl me-2 avatar-rounded">
    <img src="../assets/images/faces/9.jpg" alt="img">
    <a href="javascript:void(0);" class="badge rounded-pill bg-danger avatar-badge"><i class="fe fe-plus"></i></a>
</span>

Avatar With Online Status Indicators

avatars having online status indicator.

<span class="avatar avatar-xs me-2 online avatar-rounded">
    <img src="../assets/images/faces/8.jpg" alt="img">
</span>
<span class="avatar avatar-sm online me-2 avatar-rounded">
    <img src="../assets/images/faces/10.jpg" alt="img">
</span>
<span class="avatar avatar-md me-2 online avatar-rounded">
    <img src="../assets/images/faces/12.jpg" alt="img">
</span>
<span class="avatar avatar-lg me-2 online avatar-rounded">
    <img src="../assets/images/faces/13.jpg" alt="img">
</span>
<span class="avatar avatar-xl me-2 online avatar-rounded">
    <img src="../assets/images/faces/14.jpg" alt="img">
</span>
<span class="avatar avatar-xxl me-2 online avatar-rounded">
    <img src="../assets/images/faces/15.jpg" alt="img">
</span>

Avatar With Offline Status Indicators

avatars having a offline status indicator.

<span class="avatar avatar-xs me-2 offline avatar-rounded">
    <img src="../assets/images/faces/2.jpg" alt="img">
</span>
<span class="avatar avatar-sm offline me-2 avatar-rounded">
    <img src="../assets/images/faces/3.jpg" alt="img">
</span>
<span class="avatar avatar-md me-2 offline avatar-rounded">
    <img src="../assets/images/faces/4.jpg" alt="img">
</span>
<span class="avatar avatar-lg me-2 offline avatar-rounded">
    <img src="../assets/images/faces/5.jpg" alt="img">
</span>
<span class="avatar avatar-xl me-2 offline avatar-rounded">
    <img src="../assets/images/faces/6.jpg" alt="img">
</span>
<span class="avatar avatar-xxl me-2 offline avatar-rounded">
    <img src="../assets/images/faces/7.jpg" alt="img">
</span>

Avatars With Number Badges

Avatar numbers indicates the no. of unread notififactions/messages.

<span class="avatar avatar-xs me-2 avatar-rounded">
    <img src="../assets/images/faces/2.jpg" alt="img">
    <span class="badge rounded-pill bg-primary avatar-badge">2</span>
</span>
<span class="avatar avatar-sm me-2 avatar-rounded">
    <img src="../assets/images/faces/3.jpg" alt="img">
    <span class="badge rounded-pill bg-secondary avatar-badge">5</span>
</span>
<span class="avatar avatar-md me-2 avatar-rounded">
    <img src="../assets/images/faces/14.jpg" alt="img">
    <span class="badge rounded-pill bg-warning avatar-badge">1</span>
</span>
<span class="avatar avatar-lg me-2 avatar-rounded">
    <img src="../assets/images/faces/13.jpg" alt="img">
    <span class="badge rounded-pill bg-info avatar-badge">7</span>
</span>
<span class="avatar avatar-xl me-2 avatar-rounded">
    <img src="../assets/images/faces/15.jpg" alt="img">
    <span class="badge rounded-pill bg-success avatar-badge">3</span>
</span>
<span class="avatar avatar-xxl me-2 avatar-rounded">
    <img src="../assets/images/faces/9.jpg" alt="img">
    <span class="badge rounded-pill bg-danger avatar-badge">9</span>
</span>

Avatar With Initials

Avatar contains intials when user profile doesn't exist.

xs SM MD LG XL XXL

<span class="avatar avatar-xs me-2 bg-primary">
    xs
</span>
<span class="avatar avatar-sm me-2 bg-secondary">
    SM
</span>
<span class="avatar avatar-md me-2 bg-warning">
    MD
</span>
<span class="avatar avatar-lg me-2 bg-danger">
    LG
</span>
<span class="avatar avatar-xl me-2 bg-success">
    XL
</span>
<span class="avatar avatar-xxl me-2 bg-info">
    XXL
</span>

Stacked Avatars

Group of avatars stacked together.

<div class="avatar-list-stacked">
    <span class="avatar">
        <img src="../assets/images/faces/2.jpg" alt="img">
    </span>
    <span class="avatar">
        <img src="../assets/images/faces/8.jpg" alt="img">
    </span>
    <span class="avatar">
        <img src="../assets/images/faces/2.jpg" alt="img">
    </span>
    <span class="avatar">
        <img src="../assets/images/faces/10.jpg" alt="img">
    </span>
    <span class="avatar">
        <img src="../assets/images/faces/4.jpg" alt="img">
    </span>
    <span class="avatar">
        <img src="../assets/images/faces/13.jpg" alt="img">
    </span>
    <a class="avatar bg-primary text-fixed-black" href="javascript:void(0);">
        +8
    </a>
</div>

Rounded Stacked Avatars

Group of avatars stacked together.

<div class="avatar-list-stacked">
    <span class="avatar avatar-rounded">
        <img src="../assets/images/faces/2.jpg" alt="img">
    </span>
    <span class="avatar avatar-rounded">
        <img src="../assets/images/faces/8.jpg" alt="img">
    </span>
    <span class="avatar avatar-rounded">
        <img src="../assets/images/faces/2.jpg" alt="img">
    </span>
    <span class="avatar avatar-rounded">
        <img src="../assets/images/faces/10.jpg" alt="img">
    </span>
    <span class="avatar avatar-rounded">
        <img src="../assets/images/faces/4.jpg" alt="img">
    </span>
    <span class="avatar avatar-rounded">
        <img src="../assets/images/faces/13.jpg" alt="img">
    </span>
    <a class="avatar bg-primary avatar-rounded text-fixed-black" href="javascript:void(0);">
        +8
    </a>
</div>

Switcher

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?