Avatar classes to extend Bootstrap 5.

Last update: May 22, 2022

Related tags

Learning resource bootstrap-avatar

Overview

Bootstrap Avatar

A collection of fixed and responsive CSS for styling avatars.

Demo

https://ghoststead.github.io/bootstrap-avatar

Installation

jsDelivr CDN

<link href="https://cdn.jsdelivr.net/npm/bootstrap-avatar@latest/dist/avatar.min.css" rel="stylesheet">

The CDN version can be used without Bootstrap if desired.

Bootstrap build

The package contains a file named _avatar.scss which may be incorporated into the standard Bootstrap build tools.

Install via npm:

npm install bootstrap-avatar

Add the following line (or similar) to your top-level scss file:

@import "node_modules/bootstrap-avatar/scss/avatar";

Examples

Avatar with Bootstrap icons

<img class="avatar avatar-16 bg-light rounded-circle text-white p-1"
     src="https://raw.githubusercontent.com/twbs/icons/main/icons/person.svg">
<img class="avatar avatar-24 bg-light rounded-circle text-white p-1"
     src="https://raw.githubusercontent.com/twbs/icons/main/icons/person-fill.svg">
<img class="avatar avatar-32 bg-light rounded-circle text-white p-2"
     src="https://raw.githubusercontent.com/twbs/icons/main/icons/person-fill.svg">
<img class="avatar avatar-48 bg-light rounded-circle text-white p-2"
     src="https://raw.githubusercontent.com/twbs/icons/main/icons/person-fill.svg">
<img class="avatar avatar-64 bg-light rounded-circle text-white p-2"
     src="https://raw.githubusercontent.com/twbs/icons/main/icons/person-fill.svg">
<img class="avatar avatar-96 bg-light rounded-circle text-white p-2"
     src="https://raw.githubusercontent.com/twbs/icons/main/icons/person-fill.svg">
<img class="avatar avatar-128 bg-light rounded-circle text-white p-2"
     src="https://raw.githubusercontent.com/twbs/icons/main/icons/person-fill.svg">

Avatar with rounded text

Avatar with Bootstrap icons

<span class="avatar avatar-16 bg-secondary text-white rounded-2">b</span>
<span class="avatar avatar-24 bg-secondary text-white rounded-2">b</span>
<span class="avatar avatar-32 bg-secondary text-white rounded-2">b</span>
<span class="avatar avatar-48 bg-secondary text-white rounded-2">b</span>
<span class="avatar avatar-64 bg-secondary text-white rounded-2">b</span>
<span class="avatar avatar-96 bg-secondary text-white rounded-2">b</span>
<span class="avatar avatar-128 bg-secondary text-white rounded-2">b</span>

Responsive avatars

You can create avatars that resize basic on the viewport width:

<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="avatar avatar-16 avatar-md-24 avatar-lg-32 avatar-xl-64 avatar-xxl-128 text-primary" viewBox="0 0 16 16">
    <path d="M13.468 12.37C12.758 11.226 11.195 10 8 10s-4.757 1.225-5.468 2.37A6.987 6.987 0 0 0 8 15a6.987 6.987 0 0 0 5.468-2.63z"></path>
    <path fill-rule="evenodd" d="M8 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"></path>
    <path fill-rule="evenodd" d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zM0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8z"></path>
</svg>

This example uses the Bootstrap person-circle icon as an inline SVG then adds the responsive classes -md-24, -lg-32 etc so that the image grows with screen size.

These examples and others can be found on the demo page.

Development

Setup

Clone the repo
Run npm i

Build

The CSS files are generated from style.css via:

npm run build

Serve

npm run serve

The above commands serves a local version of the demo page.

This repository is maintained by Ghoststead.

Dm-utils - Utility classes for ioBroker adapters to support ioBroker.dm

dm-utils Utility classes for ioBroker adapters to support ioBroker.dm. How to use In your ioBroker adapter, add a subclass of DeviceManagement and ove

Jan 2, 2022

A concise collection of classes for PHP, Python, JavaScript and Ruby to calculate great circle distance, bearing, and destination from geographic coordinates

GreatCircle A set of three functions, useful in geographical calculations of different sorts. Available for PHP, Python, Javascript and Ruby. Live dem

Sep 30, 2022

Qwerty is the first social website focused on connecting students with similar classes and gender identities

🌈 Qwerty 🌈 Qwerty is the first social website focused on connecting students with similar classes and gender identities. To get started simply input

Oct 21, 2022

This plugin add a new utilities classes so you can use from 0% to 100%!

This plugin add new utilities classes so you can use from 0% to 100%!

Apr 3, 2022

linuxbu - a chrome extension that helps you to enter SBU classes via html-view in linux

linuxbu is a chrome extension that helps you to enter SBU classes via html-view in linux

Dec 19, 2022

Personal project to a student schedule classes according his course level. Using GraphQL, Clean Code e Clean Architecture.

classes-scheduler-graphql This is a personal project for student scheduling, with classes according his course level. I intend to make just the backen

Jul 9, 2022

A new project from Edgemony classes

TRICILY A new project from Edgemony classes Technologies used HTML5 CSS3 SASS Javascript React.js Next.js Musement API Made with ❤️ Features Designed

Jun 11, 2022

An npm package with Tailwind CSS utility classes for creating responsive grid columns without media queries using auto fit.

Grid Auto Fit for Tailwind CSS A plugin that helps you create a responsive grid layout in Tailwind CSS without using media queries. It uses the auto-f

Dec 28, 2022

Refractor to use JavaScript classes and functionalities to build a booklist web application.

BOOKLIST-APP This is a personal project that aims at using JavaScript classes to build a medium-fidelity wireframe such that a user can add or remove

Aug 18, 2022

Avatar classes to extend Bootstrap 5.

Related tags

Overview

Bootstrap Avatar

Demo

Installation

jsDelivr CDN

Bootstrap build

Examples

Avatar with Bootstrap icons

Avatar with rounded text

Avatar with Bootstrap icons

Responsive avatars

Development

Setup

Build

Serve

You might also like...

Dm-utils - Utility classes for ioBroker adapters to support ioBroker.dm

A concise collection of classes for PHP, Python, JavaScript and Ruby to calculate great circle distance, bearing, and destination from geographic coordinates

Qwerty is the first social website focused on connecting students with similar classes and gender identities

This plugin add a new utilities classes so you can use from 0% to 100%!

linuxbu - a chrome extension that helps you to enter SBU classes via html-view in linux

Personal project to a student schedule classes according his course level. Using GraphQL, Clean Code e Clean Architecture.

A new project from Edgemony classes

An npm package with Tailwind CSS utility classes for creating responsive grid columns without media queries using auto fit.

Refractor to use JavaScript classes and functionalities to build a booklist web application.

Owner

Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4.

🤖 Tailwind CSS assistant helps you to edit classes (includes JIT & ignores purge), toggle breakpoint classes on an element and view current breakpoint

A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans.

基于React开发的新一代web调试工具，支持React组件调试，类似于Chrome Devtools。A Lightweight, Easy To Extend Web Debugging Tool Build With React

Lip-sync VRM avatar client for zero-webcam mic-based vtubing

📦 Alpine JS plugin to extend the functionality of the official $persist plugin

Minimalistic configuration for TS to only extend JS with types. No TS features, no bundling. Readable maintainable code after compilation.

Forked from hayes0724/shopify-packer Modern development tool for Shopify using Webpack 5. Easy to extend and customize, zero build config, compatible with Slate and existing websites.

Bootstrap Colorpicker is a modular color picker plugin for Bootstrap.

Small library to create classes without using class syntax.