Synto - Laravel Bootstrap 5 Premium Admin & Dashboard Template

Circular avatars

<span class="avatar avatar-xs me-2 avatar-rounded">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar avatar-sm me-2 avatar-rounded">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar  me-2 avatar-rounded">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar avatar-lg me-2 avatar-rounded">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>

Square avatars

<span class="avatar avatar-xs me-2 avatar-radius-0">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar avatar-sm me-2 avatar-radius-0">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar  me-2 avatar-radius-0">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar avatar-lg me-2 avatar-radius-0">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>

Radius avatars

<span class="avatar avatar-xs me-2">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar avatar-sm me-2">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar  me-2">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar avatar-lg me-2">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>

Circular avatars With Top Status

<span class="avatar avatar-xs me-2  online-position-top avatar-rounded">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar avatar-sm  online-position-top me-2 avatar-rounded">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar avatar-md me-2  online-position-top avatar-rounded">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar avatar-lg me-2  online-position-top avatar-rounded">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>

Square avatars With Top Status

<span class="avatar avatar-xs me-2  online-position-top avatar-radius-0">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar avatar-sm  online-position-top me-2 avatar-radius-0">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar avatar-md me-2  online-position-top avatar-radius-0">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar avatar-lg me-2  online-position-top avatar-radius-0">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>

Radius avatars With Top Status

<span class="avatar avatar-xs me-2  online-position-top">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar avatar-sm  online-position-top me-2">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar avatar-md me-2  online-position-top">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar avatar-lg me-2  online-position-top">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>

Circular avatars With Bottom Status

<span class="avatar avatar-xs me-2 online avatar-rounded">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar avatar-sm online me-2 avatar-rounded">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar avatar-md me-2 online avatar-rounded">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar avatar-lg me-2 online avatar-rounded">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>

Square avatars With Bottom Status

<span class="avatar avatar-xs me-2 online avatar-radius-0">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar avatar-sm online me-2 avatar-radius-0">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar avatar-md me-2 online avatar-radius-0">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar avatar-lg me-2 online avatar-radius-0">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>

Radius avatars With Bottom Status

<span class="avatar avatar-xs me-2 online">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar avatar-sm online me-2">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar avatar-md me-2 online">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar avatar-lg me-2 online">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>

Circular avatars With Bottom Status

<span class="avatar avatar-xs me-2 online avatar-rounded">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar avatar-sm online1 me-2 avatar-rounded">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar avatar-md me-2 online2 avatar-rounded">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar avatar-lg me-2 online3 avatar-rounded">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>

Square avatars With Bottom Status

<span class="avatar avatar-xs me-2 online avatar-radius-0">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar avatar-sm online1 me-2 avatar-radius-0">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar avatar-md me-2 online2 avatar-radius-0">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar avatar-lg me-2 online3 avatar-radius-0">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>

Radius avatars With Bottom Status

<span class="avatar avatar-xs me-2 online">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar avatar-sm online1 me-2">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar avatar-md me-2 online2">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>
        <span class="avatar avatar-lg me-2 online3">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
        </span>

Avatars with Placeholder Icons

<span class="avatar avatar-xs me-2 avatar-rounded">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/21.jpg" alt="img">
        </span>
        <span class="avatar avatar-sm me-2 avatar-rounded">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/21.jpg" alt="img">
        </span>
        <span class="avatar  me-2 avatar-rounded">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/21.jpg" alt="img">
        </span>
        <span class="avatar avatar-lg me-2 avatar-rounded">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/21.jpg" alt="img">
        </span>

Avatars with Placeholder Initials

AC AC AC AC

<span class="avatar bd-blue-800 avatar-xs me-2 avatar-rounded">
            <AC>
        </span>
        <span class="avatar bd-blue-800 avatar-sm me-2 avatar-rounded">
            <AC>
        </span>
        <span class="avatar bd-blue-800 me-2 avatar-rounded">
            <AC>
        </span>
        <span class="avatar bd-blue-800 avatar-lg me-2 avatar-rounded">
            <AC>
        </span>

Avatar with Media

Maria Wanner

maria@gmail.com

<div class="d-flex align-items-center">
            <span class="avatar avatar-lg me-2 avatar-rounded">
                <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
            </span>
            <div>
                <h6 class="mb-0">Maria Wanner</h6>
                <p class="mb-0">maria@gmail.com</p>
            </div>
        </div>

Avatars Stack

Avatars Stack With Tooltip

Avatars Grid

Avatars Bodered

Avatars With Dropdown

Switcher

Avatars

Maria Wanner