Avatar

Display user's profile picture with Avatar.

Standard Avatar

The Avatar component is available in 3 sizes avatar-xl, avatar-lg and avatar-std.

dhoni dhoni dhoni 
                        
<p> class="alert alert-success">A simple success alert!!</p>
<p> class="alert alert-warn">A simple warning alert!!</p>
<p> class="alert alert-danger">A simple danger alert!!</p>
<p> class="alert alert-info">A simple info alert!!</p>

Avatar with status

Avatar supports status indicators for offline, dnd and online.

dhoni
dhoni
dhoni 
                        
<div class="avatar-status">
    <img class="avatar avatar-xl" src="..." alt="...">
    <div class="avatar-presence offline"></div>
</div>
<div class="avatar-status">
    <img class="avatar avatar-lg" src="..." alt="...">
    <div class="avatar-presence dnd"></div>
</div>
<div class="avatar-status">
    <img class="avatar avatar-std" src="..." alt="...">
    <div class="avatar-presence online"></div>
</div>