:: LUNO :: Avatar

Avatar Default

AL AL AL AL AL

HTML code

<img class="avatar rounded xs" src="../assets/img/xs/avatar1.jpg" alt="avatar" data-bs-toggle="tooltip" data-bs-placement="top" title="Avatar xs">
<img class="avatar rounded sm" src="../assets/img/xs/avatar1.jpg" alt="avatar" data-bs-toggle="tooltip" data-bs-placement="top" title="Avatar sm">
<img class="avatar rounded" src="../assets/img/xs/avatar1.jpg" alt="avatar" data-bs-toggle="tooltip" data-bs-placement="top" title="Avatar">
<img class="avatar rounded lg" src="../assets/img/xs/avatar1.jpg" alt="avatar" data-bs-toggle="tooltip" data-bs-placement="top" title="Avatar lg">
<img class="avatar rounded xl" src="../assets/img/xs/avatar1.jpg" alt="avatar" data-bs-toggle="tooltip" data-bs-placement="top" title="Avatar xl">

<span class="avatar rounded xs no-thumbnail small">AL</span>
<span class="avatar rounded sm no-thumbnail">AL</span>
<span class="avatar rounded no-thumbnail">AL</span>
<span class="avatar rounded lg no-thumbnail fs-3">AL</span>
<span class="avatar rounded xl no-thumbnail fs-1">AL</span>

Avatar Rounded Circle

AL AL AL AL AL

HTML code

<img class="avatar rounded-circle xs" src="../assets/img/xs/avatar1.jpg" alt="avatar" data-bs-toggle="tooltip" data-bs-placement="top" title="Avatar xs">
<img class="avatar rounded-circle sm" src="../assets/img/xs/avatar1.jpg" alt="avatar" data-bs-toggle="tooltip" data-bs-placement="top" title="Avatar sm">
<img class="avatar rounded-circle" src="../assets/img/xs/avatar1.jpg" alt="avatar" data-bs-toggle="tooltip" data-bs-placement="top" title="Avatar">
<img class="avatar rounded-circle lg" src="../assets/img/xs/avatar1.jpg" alt="avatar" data-bs-toggle="tooltip" data-bs-placement="top" title="Avatar lg">
<img class="avatar rounded-circle xl" src="../assets/img/xs/avatar1.jpg" alt="avatar" data-bs-toggle="tooltip" data-bs-placement="top" title="Avatar xl">

Avatar with shadow

HTML code

<img class="avatar rounded shadow img-thumbnail sm" src="../assets/img/xs/avatar1.jpg" alt="avatar" data-bs-toggle="tooltip" data-bs-placement="top" title="Avatar sm">
<img class="avatar rounded shadow img-thumbnail" src="../assets/img/xs/avatar1.jpg" alt="avatar" data-bs-toggle="tooltip" data-bs-placement="top" title="Avatar">
<img class="avatar rounded shadow img-thumbnail lg" src="../assets/img/xs/avatar1.jpg" alt="avatar" data-bs-toggle="tooltip" data-bs-placement="top" title="Avatar lg">
<img class="avatar rounded shadow img-thumbnail xl" src="../assets/img/xs/avatar1.jpg" alt="avatar" data-bs-toggle="tooltip" data-bs-placement="top" title="Avatar xl">

Avatar with shadow

Avatar:

HTML code

<div class="d-flex align-items-center mb-3">
    <label class="me-3">Avatar:</label>
    <a href="#"><img class="avatar xs rounded-circle lift me-1" src="../assets/img/xs/avatar1.jpg" alt="avatar" data-bs-toggle="tooltip" title="Avatar"></a>
    <a href="#"><img class="avatar xs rounded-circle lift me-1" src="../assets/img/xs/avatar2.jpg" alt="avatar" data-bs-toggle="tooltip" title="Avatar"></a>
    <a href="#"><img class="avatar xs rounded-circle lift me-1" src="../assets/img/xs/avatar3.jpg" alt="avatar" data-bs-toggle="tooltip" title="Avatar"></a>
    <a href="#"><img class="avatar xs rounded-circle lift me-1" src="../assets/img/xs/avatar4.jpg" alt="avatar" data-bs-toggle="tooltip" title="Avatar"></a>
</div>

<div class="d-flex align-items-center mb-3">
    <label class="me-3">Avatar:</label>
    <a href="#"><img class="avatar sm rounded-circle lift me-1" src="../assets/img/xs/avatar1.jpg" alt="avatar" data-bs-toggle="tooltip" title="Avatar"></a>
    <a href="#"><img class="avatar sm rounded-circle lift me-1" src="../assets/img/xs/avatar2.jpg" alt="avatar" data-bs-toggle="tooltip" title="Avatar"></a>
    <a href="#"><img class="avatar sm rounded-circle lift me-1" src="../assets/img/xs/avatar3.jpg" alt="avatar" data-bs-toggle="tooltip" title="Avatar"></a>
    <a href="#"><img class="avatar sm rounded-circle lift me-1" src="../assets/img/xs/avatar4.jpg" alt="avatar" data-bs-toggle="tooltip" title="Avatar"></a>
</div>

<div class="d-flex align-items-center mb-3">
    <label class="me-3">Avatar:</label>
    <a href="#"><img class="avatar rounded-circle lift me-1" src="../assets/img/xs/avatar1.jpg" alt="avatar" data-bs-toggle="tooltip" title="Avatar"></a>
    <a href="#"><img class="avatar rounded-circle lift me-1" src="../assets/img/xs/avatar2.jpg" alt="avatar" data-bs-toggle="tooltip" title="Avatar"></a>
    <a href="#"><img class="avatar rounded-circle lift me-1" src="../assets/img/xs/avatar3.jpg" alt="avatar" data-bs-toggle="tooltip" title="Avatar"></a>
    <a href="#"><img class="avatar rounded-circle lift me-1" src="../assets/img/xs/avatar4.jpg" alt="avatar" data-bs-toggle="tooltip" title="Avatar"></a>
</div>

<div class="d-flex align-items-center">
    <label class="me-3">Avatar:</label>
    <a href="#"><img class="avatar lg rounded-circle lift me-1" src="../assets/img/xs/avatar1.jpg" alt="avatar" data-bs-toggle="tooltip" title="Avatar"></a>
    <a href="#"><img class="avatar lg rounded-circle lift me-1" src="../assets/img/xs/avatar2.jpg" alt="avatar" data-bs-toggle="tooltip" title="Avatar"></a>
    <a href="#"><img class="avatar lg rounded-circle lift me-1" src="../assets/img/xs/avatar3.jpg" alt="avatar" data-bs-toggle="tooltip" title="Avatar"></a>
    <a href="#"><img class="avatar lg rounded-circle lift me-1" src="../assets/img/xs/avatar4.jpg" alt="avatar" data-bs-toggle="tooltip" title="Avatar"></a>
</div>

Bootstrap alerts Bootstrap badge