Author: | ghoststead |
---|---|
Views Total: | 2,129 views |
Official Page: | Go to website |
Last Update: | December 28, 2020 |
License: | MIT |
Preview:

Description:
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>
Changelog:
v1.2.0 (12/28/2020)
- Force width/height to be 100% for direct child nodes of .avatar
v1.1.0 (12/28/2020)
- Change the icons to flex display
v1.0.4 (12/19/2020)
- Remove a 1px offset from the main avatar class.