Chatflix | HTML Bootstrap 5 Chat Template

Avatars

Create avatars with different sizes and shapes.

Avatar sizes

Control avatar sizes with next classes.

                                        <div class="avatar avatar-sm">
    <img src="assets/img/avatar.png" alt="Image description">
</div>

<div class="avatar">
    <img src="assets/img/avatar.png" alt="Image description">
</div>

<div class="avatar avatar-lg">
    <img src="assets/img/avatar.png" alt="Image description">
</div>

<div class="avatar avatar-xl">
    <img src="assets/img/avatar.png" alt="Image description">
</div>

                                    

Avatar indicator

Show user status with online, away and busy indicators.

                                        <div class="avatar avatar-online">
    <img src="assets/img/avatar.png" alt="Image description">
</div>

<div class="avatar avatar-away">
    <img src="assets/img/avatar.png" alt="Image description">
</div>

<div class="avatar avatar-busy">
    <img src="assets/img/avatar.png" alt="Image description">
</div>

                                    

Avatar initials

You can use initials instead of images.

                                        <div class="avatar avatar-sm">
    <span class="avatar-label fs-6">GH</span>
</div>

<div class="avatar">
    <span class="avatar-label">GH</span>
</div>

<div class="avatar avatar-lg">
    <span class="avatar-label">GH</span>
</div>

<div class="avatar avatar-xl">
    <span class="avatar-label fs-2">GH</span>
</div>

                                    

Square avatar

Add .avatar-square class alongside with .avatar to get square shape of avatar.

                                        <div class="avatar avatar-sm avatar-square">
    <span class="avatar-label fs-6">GH</span>
</div>

<div class="avatar avatar-square">
    <span class="avatar-label">GH</span>
</div>

<div class="avatar avatar-lg avatar-square">
    <span class="avatar-label">GH</span>
</div>

<div class="avatar avatar-xl avatar-square">
    <span class="avatar-label fs-2">GH</span>
</div>

                                    

Avatar group

Combine several avatars into a group of avatars.

                                        <div class="avatar-group">
    <div class="avatar">
        <img class="avatar-img" src="assets/img/avatar.png" alt="Image description">
    </div>
    <div class="avatar">
        <img class="avatar-img" src="assets/img/avatar2.png" alt="Image description">
    </div>
    <div class="avatar">
        <img class="avatar-img" src="assets/img/avatar3.png" alt="Image description">
    </div>
    <div class="avatar">
        <img class="avatar-img" src="assets/img/avatar4.png" alt="Image description">
    </div>
</div>

                                    

TOC