@extends('layouts.app') @section('styles') {{-- Style Here --}} @endsection @section('content')

Avatar

Use .badge-collapsed-img class on ul tag.

avatar
avatar
avatar
avatar 
<div class="avatar avatar-xl">
<img alt="avatar" src="{{Vite::asset('resources/images/profile-12.jpeg')}}" class="rounded-circle" />
</div>
<div class="avatar avatar-lg">
<img alt="avatar" src="{{Vite::asset('resources/images/profile-12.jpeg')}}" class="rounded-circle" />
</div>
<div class="avatar">
<img alt="avatar" src="{{Vite::asset('resources/images/profile-12.jpeg')}}" class="rounded-circle" />
</div>
<div class="avatar avatar-sm">
<img alt="avatar" src="{{Vite::asset('resources/images/profile-12.jpeg')}}" class="rounded-circle" />
</div>

Indicators

Use .avatar-indicators class on div.avatar element

avatar
avatar
avatar
avatar 
<div class="avatar avatar-xl avatar-indicators avatar-offline">
<img alt="avatar" src="{{Vite::asset('resources/images/profile-12.jpeg')}}" class="rounded-circle" />
</div>
<div class="avatar avatar-lg avatar-indicators avatar-online">
<img alt="avatar" src="{{Vite::asset('resources/images/profile-12.jpeg')}}" class="rounded-circle" />
</div>
<div class="avatar avatar-indicators avatar-offline">
<img alt="avatar" src="{{Vite::asset('resources/images/profile-12.jpeg')}}" class="rounded-circle" />
</div>
<div class="avatar avatar-sm avatar-indicators avatar-online">
<img alt="avatar" src="{{Vite::asset('resources/images/profile-12.jpeg')}}" class="rounded-circle" />
</div>

Shapes

Use .rounded and .rounded-circle class to make avatar rounded and circlular respectively.

avatar
avatar
avatar
avatar 
<div class="avatar avatar-xl">
<img alt="avatar" src="{{Vite::asset('resources/images/profile-12.jpeg')}}" class="rounded" />
</div>
<div class="avatar avatar-xl">
<img alt="avatar" src="{{Vite::asset('resources/images/profile-12.jpeg')}}" class="rounded-circle" />
</div>

<div class="avatar avatar-lg">
<img alt="avatar" src="{{Vite::asset('resources/images/profile-12.jpeg')}}" class="rounded" />
</div>
<div class="avatar avatar-lg">
<img alt="avatar" src="{{Vite::asset('resources/images/profile-12.jpeg')}}" class="rounded-circle" />
</div>

Icons

Use span with .avatar-icon class to make Icons avatar.

<div class="avatar avatar-xl">
<span class="avatar-icon rounded-circle"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></span>
</div>
<div class="avatar avatar-lg">
<span class="avatar-icon rounded-circle"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></span>
</div>
<div class="avatar">
<span class="avatar-icon rounded-circle"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></span>
</div>
<div class="avatar avatar-sm">
<span class="avatar-icon rounded-circle"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></span>
</div>

Initials

Use span with .avatar-title class to make user name tags.

AG
AG
AG
AG 
<div class="avatar avatar-xl">
<span class="avatar-title rounded-circle">AG</span>
</div>
<div class="avatar avatar-lg">
<span class="avatar-title rounded-circle">AG</span>
</div>
<div class="avatar">
<span class="avatar-title rounded-circle">AG</span>
</div>
<div class="avatar avatar-sm">
<span class="avatar-title rounded-circle">AG</span>
</div>

Group

Use div with .avatar--group class and put div.avatar inside it.

avatar
avatar
avatar
AG 
<div class="avatar--group">
<div class="avatar avatar-sm">
<img alt="avatar" src="{{Vite::asset('resources/images/profile-16.jpeg')}}" class="rounded-circle" />
</div>
<div class="avatar avatar-sm">
<img alt="avatar" src="{{Vite::asset('resources/images/delete-user-4.jpeg')}}" class="rounded-circle" />
</div>
<div class="avatar avatar-sm">
<img alt="avatar" src="{{Vite::asset('resources/images/profile-5.jpeg')}}" class="rounded-circle" />
</div>
<div class="avatar avatar-sm">
<span class="avatar-title rounded-circle">AG</span>
</div>
</div>

Group with badge

Use .avatar--group with .avatar-group-badge class also, add .badge element with .counter class.

avatar
avatar
avatar
AG



7
avatar
avatar
avatar
AG 
<div class="avatar--group avatar-group-badge">
<span class="badge badge-primary counter"></span>
<div class="avatar avatar-sm">
<img alt="avatar" src="assets/img/profile-16.jpeg" class="rounded-circle" />
</div>
<div class="avatar avatar-sm">
<img alt="avatar" src="assets/img/delete-user-4.jpeg" class="rounded-circle" />
</div>
<div class="avatar avatar-sm">
<img alt="avatar" src="assets/img/profile-5.jpeg" class="rounded-circle" />
</div>
<div class="avatar avatar-sm">
<span class="avatar-title rounded-circle">AG</span>
</div>
</div>



<div class="avatar--group avatar-group-badge">
<span class="badge badge-primary counter">9</span>
<div class="avatar avatar-sm">
<img alt="avatar" src="assets/img/profile-16.jpeg" class="rounded-circle" />
</div>
<div class="avatar avatar-sm">
<img alt="avatar" src="assets/img/delete-user-4.jpeg" class="rounded-circle" />
</div>
<div class="avatar avatar-sm">
<img alt="avatar" src="assets/img/profile-5.jpeg" class="rounded-circle" />
</div>
<div class="avatar avatar-sm">
<span class="avatar-title rounded-circle">AG</span>
</div>
</div>

Animate Y-axis

Use .translateY-axis class to make animate profile on Y-axis.

avatar
avatar
avatar
AG 
<div class="avatar--group">
<div class="avatar avatar-sm translateY-axis">
<img alt="avatar" src="{{Vite::asset('resources/images/profile-16.jpeg')}}" class="rounded-circle" />
</div>
<div class="avatar avatar-sm translateY-axis">
<img alt="avatar" src="{{Vite::asset('resources/images/delete-user-4.jpeg')}}" class="rounded-circle" />
</div>
<div class="avatar avatar-sm translateY-axis">
<img alt="avatar" src="{{Vite::asset('resources/images/profile-5.jpeg')}}" class="rounded-circle" />
</div>
<div class="avatar avatar-sm translateY-axis">
<span class="avatar-title rounded-circle">AG</span>
</div>
</div>

Animate X-axis

Use .translateX-axis class to make animate profile on X-axis.

avatar
avatar
avatar
AG 
<div class="avatar--group">
<div class="avatar avatar-sm translateX-axis">
<img alt="avatar" src="{{Vite::asset('resources/images/profile-16.jpeg')}}" class="rounded-circle" />
</div>
<div class="avatar avatar-sm translateX-axis">
<img alt="avatar" src="{{Vite::asset('resources/images/delete-user-4.jpeg')}}" class="rounded-circle" />
</div>
<div class="avatar avatar-sm translateX-axis">
<img alt="avatar" src="{{Vite::asset('resources/images/profile-5.jpeg')}}" class="rounded-circle" />
</div>
<div class="avatar avatar-sm translateX-axis">
<span class="avatar-title rounded-circle">AG</span>
</div>
</div>

Tooltip

Use Bootstrap Tooltip on img tag and span.avatar-title tag

avatar
avatar
avatar
AG 
<div class="avatar--group">
<div class="avatar avatar-sm">
<img alt="avatar" src="{{Vite::asset('resources/images/profile-16.jpeg')}}" class="rounded-circle  bs-tooltip" data-bs-original-title="Judy Holmes" />
</div>
<div class="avatar avatar-sm">
<img alt="avatar" src="{{Vite::asset('resources/images/delete-user-4.jpeg')}}" class="rounded-circle  bs-tooltip" data-bs-original-title="Judy Holmes" />
</div>
<div class="avatar avatar-sm">
<img alt="avatar" src="{{Vite::asset('resources/images/profile-5.jpeg')}}" class="rounded-circle  bs-tooltip" data-bs-original-title="Judy Holmes" />
</div>
<div class="avatar avatar-sm">
<span class="avatar-title rounded-circle  bs-tooltip" data-bs-original-title="Alan Green">AG</span>
</div>
</div>

Avatar Chips

Person Kelly Person Mary Person Lisa Person Andy Person Daisy Person James Person Oscar 
<div class="avatar--group">
<div class="avatar">
<img alt="avatar" src="{{Vite::asset('resources/images/profile-12.jpeg')}}" class="rounded-circle  bs-tooltip" data-original-title="Judy Holmes" />
</div>
<div class="avatar">
<img alt="avatar" src="{{Vite::asset('resources/images/profile-12.jpeg')}}" class="rounded-circle  bs-tooltip" data-original-title="Judy Holmes" />
</div>
<div class="avatar">
<img alt="avatar" src="{{Vite::asset('resources/images/profile-12.jpeg')}}" class="rounded-circle  bs-tooltip" data-original-title="Judy Holmes" />
</div>
<div class="avatar">
<span class="avatar-title rounded-circle  bs-tooltip" data-original-title="Alan Green">AG</span>
</div>
</div>

Dismissable Chips

Person Kelly × Person Mary × Person Lisa × Person Andy × Person Daisy × Person James × Person Oscar × 
<div class="avatar--group">
<div class="avatar">
<img alt="avatar" src="{{Vite::asset('resources/images/profile-12.jpeg')}}" class="rounded-circle  bs-tooltip" data-original-title="Judy Holmes" />
</div>
<div class="avatar">
<img alt="avatar" src="{{Vite::asset('resources/images/profile-12.jpeg')}}" class="rounded-circle  bs-tooltip" data-original-title="Judy Holmes" />
</div>
<div class="avatar">
<img alt="avatar" src="{{Vite::asset('resources/images/profile-12.jpeg')}}" class="rounded-circle  bs-tooltip" data-original-title="Judy Holmes" />
</div>
<div class="avatar">
<span class="avatar-title rounded-circle  bs-tooltip" data-original-title="Alan Green">AG</span>
</div>
</div>
@endsection @section('scripts') {{-- Scripts Here --}} @endsection