Press "Enter" to skip to content

Responsive Avatar Classes to Extend Bootstrap 5

Bootstrap Avatar is a suite of static and responsive CSS for designing glyphs. The CSS UI component for Bootstrap 5 enables you to create responsive avatars of various sizes on a web application.

How to make use of it:

1. Import the Avatar Component stylesheet.

@import "./bootstrap-avatar/scss/style.scss";

2. Or Insert the compiled stylesheet into the doc.

<link href="./dist/avatar.css" rel="stylesheet" />

3. Create avatars on the web page and decide the avatar dimension utilizing the next 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
// Add Image Here

4. Auto resizes the avatars based mostly on the display screen width utilizing the avatar-{breakpoint}- 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>

Responsive Avatar UI Component, Bootstrap Avatar Plugin/Github

Bootstrap-Avatar-Demo


See Demo And Download

Official Website(ghoststead): Click Here

This superior jQuery/javascript plugin is developed by ghoststead. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *