Examples

Sizing

								
									
								<div class="avatar avatar-xxl">
									<img src="../../assets/img/jm_denis.jpg" alt="..." class="avatar-img rounded-circle">
								</div>

								<div class="avatar avatar-xl">
									<img src="../../assets/img/jm_denis.jpg" alt="..." class="avatar-img rounded-circle">
								</div>

								<div class="avatar avatar-lg">
									<img src="../../assets/img/jm_denis.jpg" alt="..." class="avatar-img rounded-circle">
								</div>

								<div class="avatar">
									<img src="../../assets/img/jm_denis.jpg" alt="..." class="avatar-img rounded-circle">
								</div>

								<div class="avatar avatar-sm">
									<img src="../../assets/img/jm_denis.jpg" alt="..." class="avatar-img rounded-circle">
								</div>

								<div class="avatar avatar-xs">
									<img src="../../assets/img/jm_denis.jpg" 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="../../assets/img/jm_denis.jpg" alt="..." class="avatar-img rounded-circle">
								</div>

								<div class="avatar avatar-offline">
									<img src="../../assets/img/jm_denis.jpg" alt="..." class="avatar-img rounded-circle">
								</div>

								<div class="avatar avatar-away">
									<img src="../../assets/img/jm_denis.jpg" 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="../../assets/img/jm_denis.jpg" alt="..." class="avatar-img rounded">
								</div>

								<div class="avatar">
									<img src="../../assets/img/jm_denis.jpg" 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.

								
								<div class="avatar-group">
									<div class="avatar">
										<img src="../../assets/img/jm_denis.jpg" alt="..." class="avatar-img rounded-circle border border-white">
									</div>
									<div class="avatar">
										<img src="../../assets/img/chadengle.jpg" alt="..." class="avatar-img rounded-circle border border-white">
									</div>
									<div class="avatar">
										<img src="../../assets/img/mlane.jpg" 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>