!GitHub

Bootstrap Avatar

A collection of fixed and responsive CSS for styling avatars.

Demo

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

Installation

$3

``html

`
The CDN version can be used without Bootstrap if desired.

$3

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

Install via npm:
`html
npm install bootstrap-avatar
`

Add the following line (or similar) to your top-level scss file:
`scss
@import "node_modules/bootstrap-avatar/scss/avatar";
`

This package assumes the default Bootstrap breakpoints i.e. $grid-breakpoints in the SCSS.

Examples

$3

!Avatar circle icon

`html
src="https://raw.githubusercontent.com/twbs/icons/main/icons/person.svg">
src="https://raw.githubusercontent.com/twbs/icons/main/icons/person-fill.svg">
src="https://raw.githubusercontent.com/twbs/icons/main/icons/person-fill.svg">
src="https://raw.githubusercontent.com/twbs/icons/main/icons/person-fill.svg">
src="https://raw.githubusercontent.com/twbs/icons/main/icons/person-fill.svg">
src="https://raw.githubusercontent.com/twbs/icons/main/icons/person-fill.svg">
src="https://raw.githubusercontent.com/twbs/icons/main/icons/person-fill.svg">
`

$3

$3

!Avatar circle icon

`html
b
b
b
b
b
b
b
`

$3


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





`

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

$3

* Clone the repo
* Run npm i

$3

The CSS files are generated from style.css via:
`shell
npm run build
`

$3

`shell
npm run serve
``

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

---
This repository is maintained by Mindspun.