Avatar

Premium Bootstrap4 Admin Dashboard

Avatar

<div class="avatar avatar-sm mr-1">
	<img class="img-fluid" src="images/team/01.jpg" alt="">
</div>
 <div class="avatar mr-1">
	<img class="img-fluid" src="images/team/02.jpg" alt="">
</div>
 <div class="avatar avatar-xl mr-1">
	<img class="img-fluid" src="images/team/03.jpg" alt="">
</div>
 <div class="avatar avatar-xll">
	<img class="img-fluid" src="images/team/04.jpg" alt="">
</div>

Avatar status

<div class="avatar avatar-sm mr-1">
<span class="status badge-success"></span>
	<img class="img-fluid" src="images/team/01.jpg" alt="">
</div>
 <div class="avatar mr-1">
 	<span class="status badge-danger"></span>
	<img class="img-fluid" src="images/team/02.jpg" alt="">
</div>
 <div class="avatar avatar-xl mr-1">
 	<span class="status badge-danger"></span>
	<img class="img-fluid" src="images/team/03.jpg" alt="">
</div>
 <div class="avatar avatar-xll">
 	<span class="status badge-success"></span>
	<img class="img-fluid" src="images/team/04.jpg" alt="">
</div>

Avatar group

15+ 
<div class="avatar-group">
<div class="avatar avatar-sm">
	 <a href="#" data-toggle="tooltip" data-placement="top" title="Airi Satou">	<img class="img-fluid" src="images/team/01.jpg" alt=""></a>
	</div>
	 <div class="avatar avatar-sm">
		<a href="#" data-toggle="tooltip" data-placement="top" title="Bruno Nash">	<img class="img-fluid" src="images/team/02.jpg" alt=""></a>
	</div>
	 <div class="avatar avatar-sm">
		<a href="#" data-toggle="tooltip" data-placement="top" title="Cedric Kelly">	<img class="img-fluid" src="images/team/03.jpg" alt=""></a>
	</div>
	 <div class="avatar avatar-sm">
		<a href="#" data-toggle="tooltip" data-placement="top" title="Gavin Joyce">	<img class="img-fluid" src="images/team/04.jpg" alt=""></a>
	</div> 
	<div class="avatar avatar-sm">
		<a href="#" data-toggle="tooltip" data-placement="top" title="View all"><span class="avatar-name">15+</span> </a>
	</div> 
</div>

Avatar name

SA
SA
SA
SA 
<div class="avatar avatar-sm bg-primary mr-1">
	<span class="avatar-name">SA</span>
</div>
 <div class="avatar bg-success mr-1">
	<span class="avatar-name">SA</span>
</div>
 <div class="avatar avatar-xl bg-secondary mr-1">
	<span class="avatar-name">SA</span>
</div>
 <div class="avatar avatar-xll bg-info">
	<span class="avatar-name">SA</span>
</div>

Avatar name status

SA
SA
SA
SA 
<div class="avatar avatar-sm bg-primary mr-1">
<span class="status badge-danger"></span>
	<span class="avatar-name">SA</span>
</div>
 <div class="avatar bg-primary mr-1">
 	<span class="status badge-success"></span>
	<span class="avatar-name">SA</span>
</div>
 <div class="avatar avatar-xl bg-primary mr-1">
 	<span class="status badge-danger"></span>
	<span class="avatar-name">SA</span>
</div>
 <div class="avatar avatar-xll bg-primary">
 	<span class="status badge-success"></span>
	<span class="avatar-name">SA</span>
</div>

Avatar name group

SA
SA
SA
10+ 
<div class="avatar-group">
<div class="avatar avatar-sm bg-primary">
		<span class="avatar-name">SA</span>
	</div>
	 <div class="avatar avatar-sm bg-secondary">
		<span class="avatar-name">SA</span>
	</div>
	 <div class="avatar avatar-sm bg-info">
		<span class="avatar-name">SA</span>
	</div>
	 <div class="avatar avatar-sm bg-danger">
		<span class="avatar-name">10+</span>
	</div> 
</div>