Avatars

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

Table of Content

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>