Loading...

###### Don't Miss Out! Out new update has been release.

###### Something you love is now on sale!

Buy now !

#### Avatars

#### Sizes

You can change the size of avatar using `.img- * (70/80/90/100)` class.

    <!--You can use img-* class through change the size of avatar (70/80/90/100).-->
    <div class="avatar">
    <img class="img-100 rounded-circle" src="../assets/images/avtar/3.jpg" alt="#">
    </div>
    <div class="avatar">
    <img class="img-90 rounded-circle" src="../assets/images/avtar/4.jpg" alt="#">
    </div>
    <div class="avatar">
    <img class="img-80 rounded-circle" src="../assets/images/avtar/7.jpg" alt="#">
    </div>
    <div class="avatar">
    <img class="img-70 rounded-circle" src="../assets/images/avtar/11.jpg" alt="#">
    </div>

#### Status indicator

Using `.status-* (online/offline/dnd)` class you can set the status of avatar.

    <!-- You can use status-* class through the set status (online/offline/dnd). -->
    <div class="avatar">
    <img class="img-100 rounded-circle" src="../assets/images/user/1.jpg" alt="#">
    <div class="status bg-success"></div>
    </div>
    <div class="avatar">
    <img class="img-90 rounded-circle" src="../assets/images/avtar/16.jpg" alt="#">
    <div class="status bg-warning"></div>
    </div>
    <div class="avatar"><img class="img-80 rounded-circle" src="../assets/images/avtar/7.jpg" alt="#">
    <div class="status bg-danger"></div>
    </div>
    <div class="avatar"><img class="img-70 rounded-circle" src="../assets/images/avtar/3.jpg" alt="#">
    <div class="status bg-success"></div>
    </div>

#### Shapes

Using the`.b-r-* (8/30/35/25)` class you can set the shapes of avatar.

    <!-- Give the shape to avatar using .b-r-* class. (8/25/30/35). -->
    <div class="avatar">
    <img class="img-100 b-r-8" src="../assets/images/avtar/4.jpg" alt="#">
    </div>
    <div class="avatar">
    <img class="img-90 b-r-30" src="../assets/images/avtar/16.jpg" alt="#">
    </div>
    <div class="avatar">
    <img class="img-80 b-r-35" src="../assets/images/avtar/3.jpg" alt="#">
    </div>
    <div class="avatar">
    <img class="img-70 rounded-circle" src="../assets/images/avtar/11.jpg" alt="#">
    </div>

#### Ratio

Give the shape to avatar using `.ratio` and `img-* (50/70/80/90/100)` class.

    <!-- You can use b-r-* class through the set status (100/90/80/70/50). -->
    <div class="avatars">
    <div class="avatar ratio">
    <img class="b-r-8 img-100" src="../assets/images/avtar/11.jpg" alt="#">
    </div>
    <div class="avatar ratio">
    <img class="b-r-8 img-90" src="../assets/images/avtar/4.jpg" alt="#">
    </div>
    <div class="avatar ratio">
    <img class="b-r-8 img-80" src="../assets/images/user/1.jpg" alt="#">
    </div>
    <div class="avatar ratio">
    <img class="b-r-8 img-70" src="../assets/images/avtar/16.jpg" alt="#">
    </div>
    <div class="avatar ratio">
    <img class="b-r-8 img-50" src="../assets/images/avtar/7.jpg" alt="#">
    </div>

#### Grouping

You can set the group of avatars like `.img-* (40/50/60/80/100)` and `.b-r-* (8/30/35)`.

    <!-- You can set the group of avatars use img-* and .b-r-* class (40/50/60/80/100) and (8/30/35). -->
    <div class="customers d-inline-block avatar-group">
    <ul>
    <li class="d-inline-block">
    <img class="img-100 b-r-8" src="../assets/images/avtar/4.jpg" alt="#">
    </li>
    <li class="d-inline-block">
    <img class="img-80 b-r-30" src="../assets/images/avtar/16.jpg" alt="#">
    </li>
    <li class="d-inline-block">
    </li><img class="img-50 b-r-35" src="../assets/images/avtar/3.jpg" alt="#">
    </ul>
    </div>
    <div class="customers d-inline-block avatar-group">
    <ul>
    <li class="d-inline-block">
    <img class="img-60 rounded-circle" src="../assets/images/avtar/16.jpg" alt="#">
    </li>
    <li class="d-inline-block">
    <img class="b-r-8 img-80" src="../assets/images/user/1.jpg" alt="#">
    </li>
    <li class="d-inline-block">
    <img class="img-60 rounded-circle" src="../assets/images/avtar/16.jpg" alt="#">
    </li>
    </ul>
    </div>
    <div class="customers d-inline-block avatar-group">
    <ul>
    <li class="d-inline-block">
    <img class="img-40 rounded-circle" src="../assets/images/user/3.jpg" alt="">
    </li>
    <li class="d-inline-block">
    <img class="img-40 rounded-circle" src="../assets/images/user/5.jpg" alt="">
    </li>
    <li class="d-inline-block">
    <img class="img-40 rounded-circle" src="../assets/images/user/1.jpg" alt="">
    </li>
    </ul>