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.

<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>