Round Shape Avatar In Text

DL
DL
DL
DL
DL

Click Copy Button

<div class="media">
<div class="avatar-box thumb-xl align-self-center mr-2"><span class="avatar-title bg-soft-success rounded-circle">DL</span></div>
<div class="avatar-box thumb-lg align-self-center mr-2"><span class="avatar-title bg-soft-pink rounded-circle">DL</span></div>
<div class="avatar-box thumb-md align-self-center mr-2"><span class="avatar-title bg-soft-purple rounded-circle">DL</span></div>
<div class="avatar-box thumb-sm align-self-center mr-2"><span class="avatar-title bg-soft-warning rounded-circle">DL</span></div>
<div class="avatar-box thumb-xs align-self-center"><span class="avatar-title bg-soft-info rounded-circle">DL</span></div></div>
<!-- Primary Alert Start -->

Square Shape Avatar In Text

DL
DL
DL
DL
DL

Click Copy Button

<div class="media">
<div class="avatar-box thumb-xl align-self-center mr-2"><span class="avatar-title bg-soft-success rounded">DL</span></div>
<div class="avatar-box thumb-lg align-self-center mr-2"><span class="avatar-title bg-soft-pink rounded">DL</span></div>
<div class="avatar-box thumb-md align-self-center mr-2"><span class="avatar-title bg-soft-purple rounded">DL</span></div>
<div class="avatar-box thumb-sm align-self-center mr-2"><span class="avatar-title bg-soft-warning rounded">DL</span></div>
<div class="avatar-box thumb-xs align-self-center"><span class="avatar-title bg-soft-info rounded">DL</span></div></div>

Avatar

user

John Tamez

Johntamez@gmail.com

Click Copy Button

<div class="avatar-area">
    <h4 class="mt-0 card-title">Avatar</h4>
    <div class="media"><a class="#" href="#"><img src="img/member-img/mail-4.jpg" alt="user" class="rounded-circle thumb-md"></a>
        <div class="media-body align-self-center ml-3">
            <p class="font-14 font-weight-bold mb-0">John Tamez</p>
            <p class="mb-0 font-12 text-muted">Johntamez@gmail.com</p>
        </div>
    </div>
</div>

Group Avatar

user user user user

Click Copy Button

<div class="avatar-area">
    <h4 class="mt-0 card-title">Group Avatar</h4>
    <div class="img-group">
        <a class="user-avatar user-avatar-group" href="#"><img src="img/member-img/mail-1.jpg" alt="user" class="rounded-circle"> </a>
        <a class="user-avatar user-avatar-group" href="#"><img src="img/member-img/mail-2.jpg" alt="user" class="rounded-circle"> </a>
        <a class="user-avatar user-avatar-group" href="#"><img src="img/member-img/mail-3.jpg" alt="user" class="rounded-circle"> </a>
        <a class="user-avatar user-avatar-group" href="#"><img src="img/member-img/mail-4.jpg" alt="user" class="rounded-circle"></a>
    </div>
</div>

Avatar Size

user user user user user

Click Copy Button

<div class="avatar-area mb-50">
<h4 class="mt-0 card-title">Avatar Size</h4>
<a class="user-avatar mr-2" href="#"><img src="img/member-img/mail-3.jpg" alt="user" class="thumb-xl mb-2 rounded-circle"> </a>
<a class="user-avatar mr-2" href="#"><img src="img/member-img/mail-3.jpg" alt="user" class="thumb-lg mb-2 rounded-circle"> </a>
<a class="user-avatar mr-2" href="#"><img src="img/member-img/mail-3.jpg" alt="user" class="thumb-md mb-2 rounded-circle"> </a>
<a class="user-avatar mr-2" href="#"><img src="img/member-img/mail-3.jpg" alt="user" class="thumb-sm mb-2 rounded-circle"> </a>
<a class="user-avatar mr-2" href="#"><img src="img/member-img/mail-3.jpg" alt="user" class="thumb-xs mb-2 rounded-circle"></a></div>

Avatar Size

user user user user user

Click Copy Button

<div class="avatar-area mb-50">
<h4 class="mt-0 card-title">Avatar Size</h4>
<a class="user-avatar mr-2" href="#"><img src="img/member-img/mail-2.jpg" alt="user" class="thumb-xl mb-2 rounded"> </a>
<a class="user-avatar mr-2" href="#"><img src="img/member-img/mail-2.jpg" alt="user" class="thumb-lg mb-2 rounded"> </a>
<a class="user-avatar mr-2" href="#"><img src="img/member-img/mail-2.jpg" alt="user" class="thumb-md mb-2 rounded"> </a>
<a class="user-avatar mr-2" href="#"><img src="img/member-img/mail-2.jpg" alt="user" class="thumb-sm mb-2 rounded"> </a>
<a class="user-avatar mr-2" href="#"><img src="img/member-img/mail-2.jpg" alt="user" class="thumb-xs mb-2 rounded"></a></div>

Avatar With Badge

user user user user

Click Copy Button

<div class="avatar-area mb-50">
<h4 class="mt-0 card-title">Avatar With Badge</h4>
<div class="img-group">
    <a class="user-avatar mr-2" href="#"><img src="img/member-img/mail-3.jpg" alt="user" class="rounded-circle thumb-md"> <span class="avatar-badge online"></span> </a>
    <a class="user-avatar mr-2" href="#"><img src="img/member-img/mail-5.jpg" alt="user" class="rounded-circle thumb-md"> <span class="avatar-badge offline"></span> </a>
    <a class="user-avatar mr-2" href="#"><img src="img/member-img/mail-4.jpg" alt="user" class="rounded-circle thumb-md"> <span class="avatar-badge offline"></span> </a>
    <a class="user-avatar mr-2" href="#"><img src="img/member-img/mail-2.jpg" alt="user" class="rounded-circle thumb-md"> <span class="avatar-badge online"></span></a>
</div></div>

Avatar With Tooltip

user user user user user user

Click Copy Button

<div class="avatar-area mb-50">
<h4 class="mt-0 card-title">Avatar With Tooltip</h4>
<div class="media"><a class="mr-2" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Russell Jones"><img src="img/member-img/mail-4.jpg" alt="user" class="rounded-circle thumb-md"> </a>
<a class="mr-2" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Otis Gomez"><img src="img/member-img/mail-4.jpg" alt="user" class="rounded-circle thumb-md"> </a>
<a class="mr-2" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Frank Osborn"><img src="img/member-img/mail-4.jpg" alt="user" class="rounded-circle thumb-md"> </a>
<a class="mr-2" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Dorothy Key"><img src="img/member-img/mail-4.jpg" alt="user" class="rounded-circle thumb-md"> </a>
<a class="mr-2" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Joseph Cross"><img src="img/member-img/mail-4.jpg" alt="user" class="rounded-circle thumb-md"> </a>
<a class="mr-2" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Shari Krieger"><img src="img/member-img/mail-4.jpg" alt="user" class="rounded-circle thumb-md"></a>
</div>
</div>

Square Shape Avatar

user user user user user user

Click Copy Button

<div class="avatar-area">
<h4 class="mt-0 card-title">Square Shape Avatar</h4>
    <div class="media">
        <a class="mr-2" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Smith Jones"><img src="img/member-img/mail-1.jpg" alt="user" class="rounded thumb-md"> </a>
        <a class="mr-2" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Otis Gomez"><img src="img/member-img/mail-1.jpg" alt="user" class="rounded thumb-md"> </a>
        <a class="mr-2" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Frank Osborn"><img src="img/member-img/mail-1.jpg" alt="user" class="rounded thumb-md"> </a>
        <a class="mr-2" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Dorothy Key"><img src="img/member-img/mail-1.jpg" alt="user" class="rounded thumb-md"> </a>
        <a class="mr-2" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Joseph Cross"><img src="img/member-img/mail-1.jpg" alt="user" class="rounded thumb-md"> </a>
        <a class="mr-2" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Shari Krieger"><img src="img/member-img/mail-1.jpg" alt="user" class="rounded thumb-md"></a>
    </div>
</div>