Nutmeg Pumpkin Macchiato

    bootstrap-avatar

    1.3.1 • Public • Published

    GitHub

    Bootstrap Avatar

    A collection of fixed and responsive CSS for styling avatars.

    Demo

    https://getmindspun.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";

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

    Examples

    Avatar with Bootstrap icons

    Avatar circle icon

    <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

    Avatar circle icon

    <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 Mindspun.

    Install

    npm i bootstrap-avatar

    DownloadsWeekly Downloads

    39

    Version

    1.3.1

    License

    MIT

    Unpacked Size

    20.2 kB

    Total Files

    9

    Last publish

    Collaborators

    • mindspun