#### Sizes

Use `.badge-collapsed-img` class on `ul` tag.

    <div class="avatar avatar-xl">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-lg">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
    </div>
    <div class="avatar">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
    </div>

#### Indicators

Use `.avatar-indicators` class on `div.avatar` element

    <div class="avatar avatar-xl avatar-indicators avatar-offline">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-lg avatar-indicators avatar-online">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-indicators avatar-offline">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm avatar-indicators avatar-online">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
    </div>

#### Shapes

Use `.rounded` and `.rounded-circle` class to make avatar rounded and circlular respectively.

    <div class="avatar avatar-xl">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded" />
    </div>
    <div class="avatar avatar-xl">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
    </div>

    <div class="avatar avatar-lg">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded" />
    </div>
    <div class="avatar avatar-lg">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
    </div>

#### Initials

Use `span` with `.avatar-title` class to make user name tags.

AG
AG
AG
AG

    <div class="avatar avatar-xl">
        <span class="avatar-title rounded-circle">AG</span>
    </div>
    <div class="avatar avatar-lg">
        <span class="avatar-title rounded-circle">AG</span>
    </div>
    <div class="avatar">
        <span class="avatar-title rounded-circle">AG</span>
    </div>
    <div class="avatar avatar-sm">
        <span class="avatar-title rounded-circle">AG</span>
    </div>

#### Group

Use `div` with `.avatar--group` class and put `div.avatar` inside it.

AG
AG

    <div class="avatar--group">
        <div class="avatar avatar-md">
            <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
        </div>
        <div class="avatar avatar-md">
            <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
        </div>
        <div class="avatar avatar-md">
            <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
        </div>
        <div class="avatar avatar-md">
            <span class="avatar-title rounded-circle">AG</span>
        </div>
    </div>

#### Animate Y-axis

Use `.translateY-axis` class to make animate profile on Y-axis.

AG

    <div class="avatar--group">
        <div class="avatar translateY-axis">
            <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
        </div>
        <div class="avatar translateY-axis">
            <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
        </div>
        <div class="avatar translateY-axis">
            <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
        </div>
        <div class="avatar translateY-axis">
            <span class="avatar-title rounded-circle">AG</span>
        </div>
    </div>

#### Animate X-axis

Use `.translateX-axis` class to make animate profile on X-axis.

AG

    <div class="avatar--group">
        <div class="avatar translateX-axis">
            <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
        </div>
        <div class="avatar translateX-axis">
            <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
        </div>
        <div class="avatar translateX-axis">
            <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
        </div>
        <div class="avatar translateX-axis">
            <span class="avatar-title rounded-circle">AG</span>
        </div>
    </div>

#### Tooltip

Use Bootstrap Tooltip on `img` tag and `span.avatar-title` tag

AG

    <div class="avatar--group">
        <div class="avatar">
            <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle  bs-tooltip" data-original-title="Judy Holmes" />
        </div>
        <div class="avatar">
            <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle  bs-tooltip" data-original-title="Judy Holmes" />
        </div>
        <div class="avatar">
            <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle  bs-tooltip" data-original-title="Judy Holmes" />
        </div>
        <div class="avatar">
            <span class="avatar-title rounded-circle  bs-tooltip" data-original-title="Alan Green">AG</span>
        </div>
    </div>