New

Powerful Svelte-Bootstrap SaaS App Template

Admin CRM Application Template

Robust Next.js SaaS App Template

Powerful React-Bootstrap SaaS App Template

Modern Remix SaaS App Template

VueJS-Bootstrap SaaS App Template

Intuitive Nuxt-Bootstrap SaaS App Template

Avatar

The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.

Shapes

Default avatar is square in shape. For rounded and circle avatar add .avatar-rounded modifier classes respectively.

<div class="avatar">
	<img src="dist/img/avatar3.jpg" alt="user" class="avatar-img">
</div>

import React from 'react';
//Images
import avatar1 from '../../../img_src/avatar1.jpg';
import avatar2 from '../../../img_src/avatar2.jpg';
import avatar3 from '../../../img_src/avatar3.jpg';
const Shapes = () => {
  return (
    <>
        <div className="avatar avatar-rounded">
            <img src={avatar1} alt="user" className="avatar-img" />
        </div>
        <div className="avatar avatar-square">
            <img src={avatar2} alt="user" className="avatar-img" />
        </div>
        <div className="avatar">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
    </>
  );
}
export default Shapes;

import React from 'react';
//Images
import avatar1 from '../../../img_src/avatar1.jpg';
import avatar2 from '../../../img_src/avatar2.jpg';
import avatar3 from '../../../img_src/avatar3.jpg';
const Shapes = () => {
  return (
    <>
        <div className="avatar avatar-rounded">
            <img src={avatar1} alt="user" className="avatar-img" />
        </div>
        <div className="avatar avatar-square">
            <img src={avatar2} alt="user" className="avatar-img" />
        </div>
        <div className="avatar">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
    </>
  );
}
export default Shapes;

<script setup>
import avatar from '@/img_src/avatar.jpg'
</script>
<template>
    <div class="avatar avatar-rounded position-relative">
        <img :src="avatar" alt="user" class="avatar-img">
        <span class="badge badge-success badge-indicator badge-indicator-xl position-top-end-overflow-1"></span>
    </div>
</template>

<script setup>
import avatar from '@/img_src/avatar.jpg'
</script>
<template>
    <div class="avatar avatar-rounded position-relative">
        <img :src="avatar" alt="user" class="avatar-img">
        <span class="badge badge-success badge-indicator badge-indicator-xl position-top-end-overflow-1"></span>
    </div>
</template>

<script>
  import avatar1 from "img-src/avatar1.jpg";
  import avatar2 from "img-src/avatar2.jpg";
  import avatar3 from "img-src/avatar3.jpg";
</script>
<div>
    <div class="avatar avatar-rounded">
        <img src={avatar1} alt="user" class="avatar-img" />
    </div>
    <div class="avatar avatar-square">
        <img src={avatar2} alt="user" class="avatar-img" />
    </div>
    <div class="avatar">
        <img src={avatar3} alt="user" class="avatar-img" />
    </div>
</div>

Sizing

Fancy larger or smaller avatar? Add .avatar-xl, .avatar-lg, .avatar-md, .avatar-sm or .avatar-xs for additional sizes. For custom sizes use sizing utilities - e.g. d-14 or d-20.

<div class="avatar avatar-rounded avatar-xxxl">
	<img src="dist/img/avatar3.jpg" alt="user" class="avatar-img">
</div>

import React from 'react';
//Images
import avatar3 from '../../../img_src/avatar3.jpg';
const AvatarSizes = () => {
  return (
    <>
        <div className="avatar avatar-rounded avatar-xxxl">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
        <div className="avatar avatar-rounded avatar-xxl">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
        <div className="avatar avatar-rounded avatar-xl">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
        <div className="avatar avatar-rounded avatar-lg">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
        <div className="avatar avatar-rounded avatar-md">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
        <div className="avatar avatar-rounded">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
        <div className="avatar avatar-rounded avatar-sm">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
        <div className="avatar avatar-rounded avatar-xs">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
        <div className="avatar avatar-rounded avatar-xxs">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
    </>
  );
}
export default AvatarSizes;

import React from 'react';
//Images
import avatar3 from '../../../img_src/avatar3.jpg';
const AvatarSizes = () => {
  return (
    <>
        <div className="avatar avatar-rounded avatar-xxxl">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
        <div className="avatar avatar-rounded avatar-xxl">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
        <div className="avatar avatar-rounded avatar-xl">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
        <div className="avatar avatar-rounded avatar-lg">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
        <div className="avatar avatar-rounded avatar-md">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
        <div className="avatar avatar-rounded">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
        <div className="avatar avatar-rounded avatar-sm">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
        <div className="avatar avatar-rounded avatar-xs">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
        <div className="avatar avatar-rounded avatar-xxs">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
    </>
  );
}
export default AvatarSizes;

<script setup>
import avatar from '@/img_src/avatar.jpg'
</script>
<template>
    <div class="avatar avatar-rounded position-relative">
        <img :src="avatar" alt="user" class="avatar-img">
        <span class="badge badge-success  badge-xl position-bottom-end-overflow-1">10</span>
    </div>
</template>

<script setup>
import avatar from '@/img_src/avatar.jpg'
</script>
<template>
    <div class="avatar avatar-rounded position-relative">
        <img :src="avatar" alt="user" class="avatar-img">
        <span class="badge badge-success  badge-xl position-bottom-end-overflow-1">10</span>
    </div>
</template>

<script>
  import avatar from "img-src/avatar.jpg";
</script>
<div class="avatar avatar-rounded avatar-xxxl">
    <img src={avatar} alt="user" class="avatar-img">
</div>

Indicators on avatar

Fancy larger or smaller avatar? Add position-relative and position classes with badge Indicators.

<div class="avatar">
	<img src="dist/img/avatar3.jpg" alt="user" class="avatar-img">
</div>

import React from 'react';
//Images
import avatar1 from '../../../img_src/avatar1.jpg';
import avatar2 from '../../../img_src/avatar2.jpg';
import avatar3 from '../../../img_src/avatar3.jpg';
const Shapes = () => {
  return (
    <>
        <div className="avatar avatar-rounded">
            <img src={avatar1} alt="user" className="avatar-img" />
        </div>
        <div className="avatar avatar-square">
            <img src={avatar2} alt="user" className="avatar-img" />
        </div>
        <div className="avatar">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
    </>
  );
}
export default Shapes;

import React from 'react';
//Images
import avatar1 from '../../../img_src/avatar1.jpg';
import avatar2 from '../../../img_src/avatar2.jpg';
import avatar3 from '../../../img_src/avatar3.jpg';
const Shapes = () => {
  return (
    <>
        <div className="avatar avatar-rounded">
            <img src={avatar1} alt="user" className="avatar-img" />
        </div>
        <div className="avatar avatar-square">
            <img src={avatar2} alt="user" className="avatar-img" />
        </div>
        <div className="avatar">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
    </>
  );
}
export default Shapes;

<script setup>
import avatar from '@/img_src/avatar.jpg'
</script>
<template>
    <div class="avatar avatar-rounded position-relative">
        <img :src="avatar" alt="user" class="avatar-img">
        <span class="badge badge-success badge-indicator badge-indicator-xl position-top-end-overflow-1"></span>
    </div>
</template>

<script setup>
import avatar from '@/img_src/avatar.jpg'
</script>
<template>
    <div class="avatar avatar-rounded position-relative">
        <img :src="avatar" alt="user" class="avatar-img">
        <span class="badge badge-success badge-indicator badge-indicator-xl position-top-end-overflow-1"></span>
    </div>
</template>

<script>
  import avatar1 from "img-src/avatar1.jpg";
  import avatar2 from "img-src/avatar2.jpg";
  import avatar3 from "img-src/avatar3.jpg";
</script>
<div>
    <div class="avatar avatar-rounded">
        <img src={avatar1} alt="user" class="avatar-img" />
    </div>
    <div class="avatar avatar-square">
        <img src={avatar2} alt="user" class="avatar-img" />
    </div>
    <div class="avatar">
        <img src={avatar3} alt="user" class="avatar-img" />
    </div>
</div>

Badge on avatar

Fancy larger or smaller avatar? Add position-relative and position classes with badge.

<div class="avatar">
	<img src="dist/img/avatar3.jpg" alt="user" class="avatar-img">
</div>

import React from 'react';
//Images
import avatar1 from '../../../img_src/avatar1.jpg';
import avatar2 from '../../../img_src/avatar2.jpg';
import avatar3 from '../../../img_src/avatar3.jpg';
const Shapes = () => {
  return (
    <>
        <div className="avatar avatar-rounded">
            <img src={avatar1} alt="user" className="avatar-img" />
        </div>
        <div className="avatar avatar-square">
            <img src={avatar2} alt="user" className="avatar-img" />
        </div>
        <div className="avatar">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
    </>
  );
}
export default Shapes;

import React from 'react';
//Images
import avatar1 from '../../../img_src/avatar1.jpg';
import avatar2 from '../../../img_src/avatar2.jpg';
import avatar3 from '../../../img_src/avatar3.jpg';
const Shapes = () => {
  return (
    <>
        <div className="avatar avatar-rounded">
            <img src={avatar1} alt="user" className="avatar-img" />
        </div>
        <div className="avatar avatar-square">
            <img src={avatar2} alt="user" className="avatar-img" />
        </div>
        <div className="avatar">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
    </>
  );
}
export default Shapes;

<script setup>
import avatar from '@/img_src/avatar.jpg'
</script>
<template>
    <div class="avatar avatar-rounded position-relative">
        <img :src="avatar" alt="user" class="avatar-img">
        <span class="badge badge-success badge-indicator badge-indicator-xl position-top-end-overflow-1"></span>
    </div>
</template>

<script setup>
import avatar from '@/img_src/avatar.jpg'
</script>
<template>
    <div class="avatar avatar-rounded position-relative">
        <img :src="avatar" alt="user" class="avatar-img">
        <span class="badge badge-success badge-indicator badge-indicator-xl position-top-end-overflow-1"></span>
    </div>
</template>

<script>
  import avatar1 from "img-src/avatar1.jpg";
  import avatar2 from "img-src/avatar2.jpg";
  import avatar3 from "img-src/avatar3.jpg";
</script>
<div>
    <div class="avatar avatar-rounded">
        <img src={avatar1} alt="user" class="avatar-img" />
    </div>
    <div class="avatar avatar-square">
        <img src={avatar2} alt="user" class="avatar-img" />
    </div>
    <div class="avatar">
        <img src={avatar3} alt="user" class="avatar-img" />
    </div>
</div>

Avatar with initials

Wrap .initial-wrap with .avatar classess.

<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>

<template>
    <div class="avatar avatar-xxxl  avatar-primary avatar-rounded">
        <span class="initial-wrap">PR</span>
    </div>
    <div class="avatar avatar-xxl  avatar-primary avatar-rounded">
        <span class="initial-wrap">PR</span>
    </div>
    <div class="avatar avatar-xl avatar-primary avatar-rounded">
        <span class="initial-wrap">PR</span>
    </div>
    <div class="avatar avatar-lg avatar-primary avatar-rounded">
        <span class="initial-wrap">PR</span>
    </div>
    <div class="avatar avatar-md avatar-primary avatar-rounded">
        <span class="initial-wrap">PR</span>
    </div>
    <div class="avatar avatar-primary avatar-rounded">
        <span class="initial-wrap">PR</span>
    </div>
    <div class="avatar avatar-sm avatar-primary avatar-rounded">
        <span class="initial-wrap">PR</span>
    </div>
    <div class="avatar avatar-xs avatar-primary avatar-rounded">
        <span class="initial-wrap">PR</span>
    </div>
    <div class="avatar avatar-xxs avatar-primary avatar-rounded">
        <span class="initial-wrap">PR</span>
    </div>
</template>

<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>

<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>

Avatar with Icons

Add icons inside .initial-wrap classes.

<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>

<template>
    <div class="avatar  avatar-icon avatar-xxxl avatar-primary avatar-rounded">
        <span class="initial-wrap">
            <feather-icon name="settings" />
        </span>
    </div>
    <div class="avatar  avatar-icon avatar-xxl avatar-primary avatar-rounded">
        <span class="initial-wrap">
            <i class="ri-checkbox-line"></i>
        </span>
    </div>
    <div class="avatar  avatar-icon avatar-xl avatar-primary avatar-rounded">
        <span class="initial-wrap">
            <i class="ri-checkbox-line"></i>
        </span>
    </div>
    <div class="avatar  avatar-icon avatar-lg avatar-primary avatar-rounded">
        <span class="initial-wrap">
            <i class="ri-checkbox-line"></i>
        </span>
    </div>
    <div class="avatar  avatar-icon avatar-md avatar-primary avatar-rounded">
        <span class="initial-wrap">
            <i class="ri-checkbox-line"></i>
        </span>
    </div>
    <div class="avatar  avatar-icon avatar-primary avatar-rounded">
        <span class="initial-wrap">
            <i class="ri-checkbox-line"></i>
        </span>
    </div>
    <div class="avatar  avatar-icon avatar-sm avatar-primary avatar-rounded">
        <span class="initial-wrap">
            <i class="ri-checkbox-line"></i>
        </span>
    </div>
    <div class="avatar  avatar-icon avatar-xs avatar-primary avatar-rounded">
        <span class="initial-wrap">
            <i class="ri-checkbox-line"></i>
        </span>
    </div>
    <div class="avatar  avatar-icon avatar-xxs avatar-primary avatar-rounded">
        <span class="initial-wrap">
            <i class="ri-checkbox-line"></i>
        </span>
    </div>
</template>

<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>

<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>

Avatar color option

Add color classes like .avatar-primary,.avatar-info with avatar.

<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>

<template>
    <div class="avatar avatar-primary avatar-rounded">
        <span class="initial-wrap">PR</span>
    </div>
    <div class="avatar avatar-info  avatar-rounded">
        <span class="initial-wrap">PR</span>
    </div>
    <div class="avatar avatar-success avatar-rounded">
        <span class="initial-wrap">PR</span>
    </div>
    <div class="avatar avatar-pink avatar-rounded">
        <span class="initial-wrap">PR</span>
    </div>
    <div class="avatar avatar-danger avatar-rounded">
        <span class="initial-wrap">PR</span>
    </div>
    <div class="avatar avatar-warning avatar-rounded">
        <span class="initial-wrap">PR</span>
    </div>
    <div class="avatar avatar-blue avatar-rounded">
        <span class="initial-wrap">PR</span>
    </div>
    <div class="avatar avatar-light avatar-rounded">
        <span class="initial-wrap">PR</span>
    </div>
    <div class="avatar avatar-dark avatar-rounded">
        <span class="initial-wrap">PR</span>
    </div>
</template>

<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>

<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>

Avatar soft

Add soft color classes like.avatar .avatar-soft-* for soft colors.

<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>

<template>
    <div class="avatar avatar-soft-primary  avatar-rounded">
        <span class="initial-wrap">PR</span>
    </div>
    <div class="avatar avatar-soft-info  avatar-rounded">
        <span class="initial-wrap">PR</span>
    </div>
    <div class="avatar avatar-soft-success avatar-rounded">
        <span class="initial-wrap">PR</span>
    </div>
    <div class="avatar avatar-soft-pink avatar-rounded">
        <span class="initial-wrap">PR</span>
    </div>
    <div class="avatar avatar-soft-danger avatar-rounded">
        <span class="initial-wrap">PR</span>
    </div>
    <div class="avatar avatar-soft-warning avatar-rounded">
        <span class="initial-wrap">PR</span>
    </div>
    <div class="avatar avatar-soft-blue avatar-rounded">
        <span class="initial-wrap">PR</span>
    </div>
    <div class="avatar avatar-soft-light avatar-rounded">
        <span class="initial-wrap">PR</span>
    </div>
    <div class="avatar avatar-soft-dark avatar-rounded">
        <span class="initial-wrap">PR</span>
    </div>
</template>

<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>

<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>

Avatar with logo

Use .avatar-logo with avatar.

<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>

<script setup>
import logo from '@/img_src/logo.jpg'
</script>
<template>
    <div class="avatar avatar-logo avatar-rounded avatar-xxxl">
        <span class="initial-wrap">
            <img :src="logo" alt="logo">
        </span>
    </div>
    <div class="avatar avatar-logo avatar-rounded avatar-xxl">
        <span class="initial-wrap">
            <img :src="logo" alt="logo">
        </span>
    </div>
    <div class="avatar avatar-logo avatar-rounded avatar-xl">
        <span class="initial-wrap">
            <img :src="logo" alt="logo">
        </span>
    </div>
    <div class="avatar avatar-logo avatar-rounded avatar-lg">
        <span class="initial-wrap">
            <img :src="logo" alt="logo">
        </span>
    </div>
    <div class="avatar avatar-logo avatar-rounded avatar-md">
        <span class="initial-wrap">
            <img :src="logo" alt="logo">
        </span>
    </div>
    <div class="avatar avatar-logo avatar-rounded">
        <span class="initial-wrap">
            <img :src="logo" alt="logo">
        </span>
    </div>
    <div class="avatar avatar-logo avatar-rounded avatar-sm">
        <span class="initial-wrap">
            <img :src="logo" alt="logo">
        </span>
    </div>
    <div class="avatar avatar-logo avatar-rounded avatar-xs">
        <span class="initial-wrap">
            <img :src="logo" alt="logo">
        </span>
    </div>
    <div class="avatar avatar-logo avatar-rounded avatar-xxs">
        <span class="initial-wrap">
            <img :src="logo" alt="logo">
        </span>
    </div>
</template>

<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>

<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>

Groups

In need of an avatar, but not the image avatar? Replace the default modifier class with avatar-group avatar-group-* ones to create avatar with name initials.

<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>

<script setup>
import avatar1 from '@/img_src/avatar1.jpg'
</script>
<template>
    <div class="avatar-group avatar-group-lg me-5">
        <div class="avatar avatar-rounded">
            <HkTooltip title="Tooltip text">
                <img :src="avatar1" alt="user" class="avatar-img">
            </HkTooltip>
        </div>
        <div class="avatar avatar-rounded">
            <HkTooltip title="Tooltip text">
                <img :src="avatar2" alt="user" class="avatar-img">
            </HkTooltip>
        </div>
        <div class="avatar avatar-rounded">
            <HkTooltip title="Tooltip text">
                <img :src="avatar3" alt="user" class="avatar-img">
            </HkTooltip>
        </div>
        <HkTooltip title="Tooltip text">
            <div class="avatar avatar-primary avatar-rounded">
                <span class="initial-wrap"><span>RD</span></span>
            </div>
        </HkTooltip>
    </div>
    <div class="avatar-group  me-5">
        <div class="avatar avatar-rounded">
            <HkTooltip title="Tooltip text">
                <img :src="avatar1" alt="user" class="avatar-img">
            </HkTooltip>
        </div>
        <div class="avatar avatar-rounded">
            <HkTooltip title="Tooltip text">
                <img :src="avatar2" alt="user" class="avatar-img">
            </HkTooltip>
        </div>
        <div class="avatar avatar-rounded">
            <HkTooltip title="Tooltip text">
                <img :src="avatar3" alt="user" class="avatar-img">
            </HkTooltip>
        </div>
        <HkTooltip title="Tooltip text">
            <div class="avatar avatar-primary avatar-rounded">
                <span class="initial-wrap"><span>RD</span></span>
            </div>
        </HkTooltip>
    </div>
    <div class="avatar-group avatar-group-sm">
        <div class="avatar avatar-rounded">
            <HkTooltip title="Tooltip text">
                <img :src="avatar1" alt="user" class="avatar-img">
            </HkTooltip>
        </div>
        <div class="avatar avatar-rounded">
            <HkTooltip title="Tooltip text">
                <img :src="avatar2" alt="user" class="avatar-img">
            </HkTooltip>
        </div>
        <div class="avatar avatar-rounded">
            <HkTooltip title="Tooltip text">
                <img :src="avatar3" alt="user" class="avatar-img">
            </HkTooltip>
        </div>
        <div class="avatar avatar-soft-primary avatar-rounded">
            <span class="initial-wrap">
                <HkTooltip title="Tooltip text">
                    <span class="feather-icon">
                        <feather-icon name="plus" />
                    </span>
                </HkTooltip>
            </span>
        </div>
    </div>
</template>

<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>

<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>

Overlapped Avatar Group

For overlapped group of avatars replace default modifier class with .avatar-group-overlapped.

<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>

<script setup>
import avatar1 from '@/img_src/avatar1.jpg'
</script>
<template>
    <div class="avatar-group avatar-group-lg avatar-group-overlapped me-5">
        <div class="avatar avatar-rounded">
            <HkTooltip title="Tooltip text">
                <img :src="avatar1" alt="user" class="avatar-img">
            </HkTooltip>
        </div>
        <div class="avatar avatar-rounded">
            <HkTooltip title="Tooltip text">
                <img :src="avatar2" alt="user" class="avatar-img">
            </HkTooltip>
        </div>
        <div class="avatar avatar-rounded">
            <HkTooltip title="Tooltip text">
                <img :src="avatar3" alt="user" class="avatar-img">
            </HkTooltip>
        </div>
        <HkTooltip title="Tooltip text">
            <div class="avatar avatar-soft-primary avatar-rounded">
                <span class="initial-wrap">
                    <span>RD</span>
                </span>
            </div>
        </HkTooltip>
    </div>
    <div class="avatar-group avatar-group-overlapped me-5">
        <div class="avatar avatar-rounded">
            <HkTooltip title="Tooltip text">
                <img :src="avatar1" alt="user" class="avatar-img">
            </HkTooltip>
        </div>
        <div class="avatar avatar-rounded">
            <HkTooltip title="Tooltip text">
                <img :src="avatar2" alt="user" class="avatar-img">
            </HkTooltip>
        </div>
        <div class="avatar avatar-rounded">
            <HkTooltip title="Tooltip text">
                <img :src="avatar3" alt="user" class="avatar-img">
            </HkTooltip>
        </div>
        <HkTooltip title="Tooltip text">
            <div class="avatar avatar-soft-primary avatar-rounded">
                <span class="initial-wrap">
                    <span>RD</span>
                </span>
            </div>
        </HkTooltip>
    </div>
    <div class="avatar-group avatar-group-sm avatar-group-overlapped">
        <div class="avatar avatar-rounded">
            <HkTooltip title="Tooltip text">
                <img :src="avatar1" alt="user" class="avatar-img">
            </HkTooltip>
        </div>
        <div class="avatar avatar-rounded">
            <HkTooltip title="Tooltip text">
                <img :src="avatar2" alt="user" class="avatar-img">
            </HkTooltip>
        </div>
        <div class="avatar avatar-rounded">
            <HkTooltip title="Tooltip text">
                <img :src="avatar3" alt="user" class="avatar-img">
            </HkTooltip>
        </div>
        <HkTooltip title="Tooltip text">
            <div class="avatar avatar-soft-primary avatar-rounded">
                <span class="initial-wrap">
                    <feather-icon name="plus" />
                </span>
            </div>
        </HkTooltip>
    </div>
</template>

<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>

<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>

Shapes
Sizing
Indicators on avatar
Badge on avatar
Avatar with initials
Avatar with Icons
Inverse initials
Inverse icons
Avatar with logo
Groups