Avatar

Cool avatars with different shapes, sizes and with the possibility to group them.

Examples

Use the .rounded-circle modifier class to create a circle avatar.

Result
HTML

<a href="#!" class="avatar">
    <img alt="Image placeholder" src="../../assets/img/theme/team-4.jpg">
</a>
<a href="#!" class="avatar rounded-circle">
    <img alt="Image placeholder" src="../../assets/img/theme/team-4.jpg">
</a>

Sizing

The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.

Result
HTML

<a href="#!" class="avatar avatar-xs rounded-circle">
    <img alt="Image placeholder" src="../../assets/img/theme/team-4.jpg">
</a>
<a href="#!" class="avatar avatar-sm rounded-circle">
    <img alt="Image placeholder" src="../../assets/img/theme/team-4.jpg">
</a>
<a href="#!" class="avatar rounded-circle">
    <img alt="Image placeholder" src="../../assets/img/theme/team-4.jpg">
</a>
<a href="#!" class="avatar avatar-lg rounded-circle">
    <img alt="Image placeholder" src="../../assets/img/theme/team-4.jpg">
</a>
<a href="#!" class="avatar avatar-xl rounded-circle">
    <img alt="Image placeholder" src="../../assets/img/theme/team-4.jpg">
</a>

Group

Include multiple avatar items inside an .avatar-group container.

Result
HTML

<div class="avatar-group">
    <a href="#!" class="avatar rounded-circle">
        <img alt="Image placeholder" src="../../assets/img/theme/team-1.jpg">
    </a>
    <a href="#!" class="avatar rounded-circle">
        <img alt="Image placeholder" src="../../assets/img/theme/team-2.jpg">
    </a>
    <a href="#!" class="avatar rounded-circle">
        <img alt="Image placeholder" src="../../assets/img/theme/team-3.jpg">
    </a>
    <a href="#!" class="avatar rounded-circle">
        <img alt="Image placeholder" src="../../assets/img/theme/team-4.jpg">
    </a>
</div>