A CSS UI component for Bootstrap 5 that enables you to create responsive avatars of different sizes on the web app.
How to use it:
1. Import the Avatar Component stylesheet.
@import "./bootstrap-avatar/scss/style.scss";
2. Or Insert the compiled stylesheet into the document.
<link href="./dist/avatar.css" rel="stylesheet" />
3. Create avatars on the page and determine the avatar size using the following CSS classes:
<span class="avatar avatar-16 bg-primary text-white rounded-circle">A</span> <span class="avatar avatar-24 bg-primary text-white rounded-circle">B</span> <span class="avatar avatar-32 bg-primary text-white rounded-circle">C</span> <span class="avatar avatar-48 bg-primary text-white rounded-circle">D</span> <span class="avatar avatar-64 bg-primary text-white rounded-circle">E</span> <span class="avatar avatar-96 bg-primary text-white rounded-circle">F</span> <span class="avatar avatar-128 bg-primary text-white rounded-circle">G</span> // Or custom image <img class="avatar avatar-16 bg-light rounded-circle text-white" src="icon.svg" />
4. Auto resize the avatars based on the screen width using the avatar-{breakpoint}-{size} class:
<span class="avatar avatar-16 avatar-md-24 avatar-lg-32 avatar-xl-64 avatar-xxl-128 bg-primary text-white rounded-circle">A</span>
The post Responsive Avatar UI Component For Bootstrap 5 appeared first on CSS Script.