#### Avatars

Create and group avatars of different sizes and shapes with a single component.

Table of Content

- Examples
  1. Sizing
  2. Status Indicator
  3. Shape
  4. Groups

#### Examples

##### Sizing

                          <div class="avatar avatar-xxl">
                            <img src="https://via.placeholder.com/50x50" alt="..." class="avatar-img rounded-circle">
                          </div>

                          <div class="avatar avatar-xl">
                            <img src="https://via.placeholder.com/50x50" alt="..." class="avatar-img rounded-circle">
                          </div>

                          <div class="avatar avatar-lg">
                            <img src="https://via.placeholder.com/50x50" alt="..." class="avatar-img rounded-circle">
                          </div>

                          <div class="avatar">
                            <img src="https://via.placeholder.com/50x50" alt="..." class="avatar-img rounded-circle">
                          </div>

                          <div class="avatar avatar-sm">
                            <img src="https://via.placeholder.com/50x50" alt="..." class="avatar-img rounded-circle">
                          </div>

                          <div class="avatar avatar-xs">
                            <img src="https://via.placeholder.com/50x50" alt="..." class="avatar-img rounded-circle">
                          </div>

##### Status Indicator

Add an online or offline status indicator to show user's availability.

    									<div class="avatar avatar-online">
    										<img src="https://via.placeholder.com/50x50" alt="..." class="avatar-img rounded-circle">
    									</div>

    									<div class="avatar avatar-offline">
    										<img src="https://via.placeholder.com/50x50" alt="..." class="avatar-img rounded-circle">
    									</div>

    									<div class="avatar avatar-away">
    										<img src="https://via.placeholder.com/50x50" alt="..." class="avatar-img rounded-circle">
    									</div>

##### Shape

Change the shape of an avatar with the default Bootstrap image classes.

                        <div class="avatar">
                          <img src="https://via.placeholder.com/50x50" alt="..." class="avatar-img rounded">
                        </div>

                        <div class="avatar">
                          <img src="https://via.placeholder.com/50x50" alt="..." class="avatar-img rounded-circle">
                        </div>

##### Groups

Easily group avatars of any size, shape and content with a single component. Make sure to add a border of a corresponding color to visually separate overflowing avatars. Each avatar can also use an `<a>` to link to the corresponding profile.

CF

                        <div class="avatar-group">
                          <div class="avatar">
                            <img src="https://via.placeholder.com/50x50" alt="..." class="avatar-img rounded-circle border border-white">
                          </div>
                          <div class="avatar">
                            <img src="https://via.placeholder.com/50x50" alt="..." class="avatar-img rounded-circle border border-white">
                          </div>
                          <div class="avatar">
                            <img src="https://via.placeholder.com/50x50" alt="..." class="avatar-img rounded-circle border border-white">
                          </div>
                          <div class="avatar">
                            <span class="avatar-title rounded-circle border border-white">CF</span>
                          </div>
                        </div>