Avatar

The Avatar component is used to represent a user, and displays the profile picture

          
            <!-- Avatar size small -->
            <div class="avatar avatar-sl">
              <img src="/images/image-kira.jpg" alt="img-avatar" class="img-round" />
            </div>

            <!-- Avatar size large -->
            <div class="avatar avatar-lg">
              <img src="/images/image-kira.jpg" alt="img-avatar" class="img-round" />
            </div>

            <!-- Avatar size extra large -->
            <div class="avatar avatar-xl">
              <img src="/images/image-kira.jpg" alt="img-avatar" class="img-round" />
            </div>
          
        

Avatar with badge

          
            <!-- Avatar with green badge -->
            <div class="avatar avatar-lg">
              <img
                src="/images/image-kira.jpg"
                alt="img-avatar"
                class="img-round"
              />
              <div class="badge badge-dot badge-green"></div>
            </div>
            
            <!-- Avatar with red badge -->
            <div class="avatar avatar-lg">
              <img
                src="/images/image-kira.jpg"
                alt="img-avatar"
                class="img-round"
              />
              <div class="badge badge-dot badge-red"></div>
            </div>
            
            <!-- Avatar with yellow badge -->
            <div class="avatar avatar-lg">
              <img
                src="/images/image-kira.jpg"
                alt="img-avatar"
                class="img-round"
              />
              <div class="badge badge-dot badge-yellow"></div>
            </div>

            <!-- Avatar with blue badge -->
            <div class="avatar avatar-lg">
              <img
                src="/images/image-kira.jpg"
                alt="img-avatar"
                class="img-round"
              />
              <div class="badge badge-dot badge-blue"></div>
            </div>
          
        

You can use any avatar size along with the badge. Just change the avatar sizing using the class names