1. First, we need fresh reactjs setup, and for that, we need to run below commands into out terminal, and also we should have latest node version installed on our system:
npx create-react-app my-awesome-project
cd my-awesome-project
npm start2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:
npm install [email protected] --save
npm start //For start project again3. Finally for the main output, we need to add below code into our my-awesome-project/src/App.js file or if you have fresh setup then you can replace my-awesome-project/src/App.js file code with below code:
import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
<div class="container">
<div class="row">
<div class="col-xl-12">
<section class="hk-sec-wrapper">
<h5 class="hk-sec-title">Shapes</h5>
<p class="mb-40">Default avatar is square in shape. For rounded and circle avatar add <code>.avatar-img .rounded</code> and <code>.avatar-img .circle</code> modifier classes respectively.</p>
<div class="row">
<div class="col-sm">
<div class="avatar mr-10">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="user" class="avatar-img"/>
</div>
<div class="avatar mr-10">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="user" class="avatar-img rounded"/>
</div>
<div class="avatar mr-10">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar mr-10">
<span class="avatar-text avatar-text-danger"><span class="initial-wrap"><span>DG</span></span>
</span>
</div>
<div class="avatar mr-10">
<span class="avatar-text avatar-text-danger rounded"><span class="initial-wrap"><span>DG</span></span>
</span>
</div>
<div class="avatar mr-10">
<span class="avatar-text avatar-text-danger rounded-circle"><span class="initial-wrap"><span>DG</span></span>
</span>
</div>
</div>
</div>
</section>
<section class="hk-sec-wrapper">
<h5 class="hk-sec-title">Sizing</h5>
<p class="mb-40">Fancy larger or smaller avatar? Add <code>.avatar-xl, .avatar-lg, .avatar-md, .avatar-sm</code> or <code>.avatar-xs</code> for additional sizes. For custom sizes use <a href="#theme/Make/sizing.html">sizing utilities</a> - e.g. d-14 or d-20.</p>
<div class="row">
<div class="col-sm">
<div class="avatar avatar-xl">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar avatar-lg">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar avatar-md">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar avatar-sm">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar avatar-xs">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="user" class="avatar-img rounded-circle"/>
</div>
</div>
</div>
</section>
<section class="hk-sec-wrapper">
<h5 class="hk-sec-title">Avatar with initials</h5>
<p class="mb-40">In need of an avatar, but not the image avatar? Replace the default modifier class with <code>.avatar-text .avatar-text-*</code> ones to create avatar with name initials.</p>
<div class="row">
<div class="col-sm">
<div class="row">
<div class="col-lg-12">
<div class="avatar">
<span class="avatar-text avatar-text-primary rounded-circle"><span class="initial-wrap"><span>PR</span></span>
</span>
</div>
<div class="avatar">
<span class="avatar-text avatar-text-info rounded-circle"><span class="initial-wrap"><span>IN</span></span>
</span>
</div>
<div class="avatar">
<span class="avatar-text avatar-text-success rounded-circle"><span class="initial-wrap"><span>SC</span></span>
</span>
</div>
<div class="avatar">
<span class="avatar-text avatar-text-danger rounded-circle"><span class="initial-wrap"><span>DG</span></span>
</span>
</div>
<div class="avatar">
<span class="avatar-text avatar-text-warning rounded-circle"><span class="initial-wrap"><span>WN</span></span>
</span>
</div>
<div class="avatar">
<span class="avatar-text avatar-text-teal rounded-circle"><span class="initial-wrap"><span>TL</span></span>
</span>
</div>
<div class="avatar">
<span class="avatar-text avatar-text-gold rounded-circle"><span class="initial-wrap"><span>GD</span></span>
</span>
</div>
<div class="avatar">
<span class="avatar-text avatar-text-pumpkin rounded-circle"><span class="initial-wrap"><span>PK</span></span>
</span>
</div>
<div class="avatar">
<span class="avatar-text avatar-text-indigo rounded-circle"><span class="initial-wrap"><span>ID</span></span>
</span>
</div>
<div class="avatar">
<span class="avatar-text avatar-text-light rounded-circle"><span class="initial-wrap"><span>LT</span></span>
</span>
</div>
<div class="avatar">
<span class="avatar-text avatar-text-dark rounded-circle"><span class="initial-wrap"><span>DK</span></span>
</span>
</div>
</div>
</div>
<div class="table-wrap mt-40">
<table class="table table-bordered mb-0">
<thead>
<tr>
<th class="w-35">Class</th>
<th class="w-65">Values</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="pa-0 bg-transparent">class="avatar-text avatar-text-[value]"</code></td>
<td class="font-14">primary / success / warning / danger / info / light / dark / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<section class="hk-sec-wrapper">
<h5 class="hk-sec-title">Avatar with inverse initials</h5>
<p class="mb-40">Replace the default modifier class with <code>.avatar-text .avatar-text-inv-*</code> ones to create avatar with inverse colors.</p>
<div class="row">
<div class="col-sm">
<div class="row">
<div class="col-lg-12">
<div class="avatar">
<span class="avatar-text avatar-text-inv-primary rounded-circle"><span class="initial-wrap"><span>PR</span></span>
</span>
</div>
<div class="avatar">
<span class="avatar-text avatar-text-inv-info rounded-circle"><span class="initial-wrap"><span>IN</span></span>
</span>
</div>
<div class="avatar">
<span class="avatar-text avatar-text-inv-success rounded-circle"><span class="initial-wrap"><span>SC</span></span>
</span>
</div>
<div class="avatar">
<span class="avatar-text avatar-text-inv-danger rounded-circle"><span class="initial-wrap"><span>DG</span></span>
</span>
</div>
<div class="avatar">
<span class="avatar-text avatar-text-inv-warning rounded-circle"><span class="initial-wrap"><span>WN</span></span>
</span>
</div>
<div class="avatar">
<span class="avatar-text avatar-text-inv-teal rounded-circle"><span class="initial-wrap"><span>TL</span></span>
</span>
</div>
<div class="avatar">
<span class="avatar-text avatar-text-inv-gold rounded-circle"><span class="initial-wrap"><span>GD</span></span>
</span>
</div>
<div class="avatar">
<span class="avatar-text avatar-text-inv-pumpkin rounded-circle"><span class="initial-wrap"><span>PK</span></span>
</span>
</div>
<div class="avatar">
<span class="avatar-text avatar-text-inv-indigo rounded-circle"><span class="initial-wrap"><span>ID</span></span>
</span>
</div>
</div>
</div>
<div class="table-wrap mt-40">
<table class="table table-bordered mb-0">
<thead>
<tr>
<th class="w-35">Class</th>
<th class="w-65">Values</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="pa-0 bg-transparent">class="avatar-text avatar-text-inv-[value]"</code></td>
<td class="font-14">primary / success / warning / danger / info / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<section class="hk-sec-wrapper">
<h5 class="hk-sec-title">Groups</h5>
<p class="mb-15">Wrap a series of avatars with <code>.avatar</code> in <code>.avatar-group</code>. Use <code>.avatar-group-lg</code> and <code>.avatar-group-sm</code> for additional sizes.</p>
<div class="row">
<div class="col-sm">
<div class="row">
<div class="col-lg-12">
<div class="avatar-group avatar-group-lg mr-40 mt-25">
<div class="avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar">
<span class="avatar-text avatar-text-primary rounded-circle"><span class="initial-wrap"><span>PR</span></span>
</span>
</div>
</div>
<div class="avatar-group avatar-group mr-40 mt-25">
<div class="avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar">
<span class="avatar-text avatar-text-red rounded-circle"><span class="initial-wrap"><span>RD</span></span>
</span>
</div>
</div>
<div class="avatar-group avatar-group-sm mr-40 mt-25">
<div class="avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar">
<span class="avatar-text avatar-text-indigo rounded-circle"><span class="initial-wrap"><span>IN</span></span>
</span>
</div>
</div>
</div>
</div>
<h6 class="mt-40 mb-10">Overlapped Avatar Group </h6>
<p class="mb-15">For overlapped group of avatars replace default modifier class with <code>.avatar-group-overlapped</code>.</p>
<div class="row">
<div class="col-lg-12">
<div class="avatar-group avatar-group-lg avatar-group-overlapped mr-40 mt-25">
<div class="avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar">
<span class="avatar-text avatar-text-red rounded-circle"><span class="initial-wrap"><span>RD</span></span>
</span>
</div>
</div>
<div class="avatar-group avatar-group-overlapped mr-40 mt-25">
<div class="avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar">
<span class="avatar-text avatar-text-indigo rounded-circle"><span class="initial-wrap"><span>IN</span></span>
</span>
</div>
</div>
<div class="avatar-group avatar-group-sm avatar-group-overlapped mr-40 mt-25">
<div class="avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar">
<span class="avatar-text avatar-text-green rounded-circle"><span class="initial-wrap"><span>GR</span></span>
</span>
</div>
</div>
</div>
</div>
<h6 class="mt-40 mb-10">Adding icon to avatar group </h6>
<p class="mb-15">Add icons instead of initials by using i tag inside avatar. Change the font sizes using font utilities.</p>
<div class="row">
<div class="col-lg-12">
<div class="avatar-group avatar-group-lg mr-40 mt-25">
<div class="avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar">
<span class="avatar-text avatar-text-inv-primary rounded-circle"><span class="initial-wrap"><span><i class="ion ion-md-add"></i></span></span>
</span>
</div>
</div>
<div class="avatar-group avatar-group-lg avatar-group-overlapped mr-40 mt-25">
<div class="avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="user" class="avatar-img rounded-circle"/>
</div>
<div class="avatar">
<span class="avatar-text avatar-text-inv-teal rounded-circle"><span class="initial-wrap"><span><i class="ion ion-md-add"></i></span></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
);
}
export default App;4. Now we need to add below code into our my-awesome-project/src/App.css file :
body{
background-color:#eee;
margin-top:20px;
}
/*Avatar*/
.hk-sec-wrapper {
background: #fff;
padding: 1.5rem;
border-radius: .25rem;
margin-bottom: 14px;
}
.hk-sec-wrapper .hk-sec-title {
display: block;
margin-bottom: 10px;
}
.mb-40 {
margin-bottom: 40px !important;
}
.mr-10 {
margin-right: 10px !important;
}
.avatar {
font-size: 1rem;
position: relative;
display: inline-block;
width: 3.875rem;
height: 3.875rem;
}
.avatar.avatar-xl {
font-size: 1.70833rem;
width: 5.125rem;
height: 5.125rem;
}
.avatar.avatar-lg {
font-size: 1.4rem;
width: 4.5rem;
height: 4.5rem;
}
.avatar.avatar-md {
font-size: .95rem;
width: 3.25rem;
height: 3.25rem;
}
.avatar.avatar-sm {
font-size: .9rem;
width: 2.625rem;
height: 2.625rem;
}
.avatar.avatar-xs {
font-size: .6rem;
width: 2rem;
height: 2rem;
}
.avatar .avatar-img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.avatar .avatar-text {
display: block;
width: 100%;
height: 100%;
position: relative;
text-transform: uppercase;
overflow: hidden;
background: #fff;
font-weight: 600;
color: #00acf0;
}
.avatar .avatar-text .initial-wrap {
display: table;
width: 100%;
height: 100%;
}
.avatar .avatar-text .initial-wrap > span {
position: relative;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.avatar .avatar-text:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
background: rgba(178, 230, 250, 0.5);
}
.avatar .avatar-text.avatar-text-cyan,
.avatar .avatar-text.avatar-text-info {
color: #1ebccd;
}
.avatar .avatar-text.avatar-text-cyan:before,
.avatar .avatar-text.avatar-text-info:before {
background: rgba(187, 235, 240, 0.5);
}
.avatar .avatar-text.avatar-text-light {
color: #6f7a7f;
}
.avatar .avatar-text.avatar-text-light:before {
background: rgba(173, 179, 182, 0.5);
}
.avatar .avatar-text.avatar-text-dark {
color: #fff;
}
.avatar .avatar-text.avatar-text-dark:before {
background: #324148 !important;
}
.avatar .avatar-text.avatar-text-sky,
.avatar .avatar-text.avatar-text-primary {
color: #00acf0;
}
.avatar .avatar-text.avatar-text-sky:before,
.avatar .avatar-text.avatar-text-primary:before {
background: rgba(178, 230, 250, 0.5);
}
.avatar .avatar-text.avatar-text-green,
.avatar .avatar-text.avatar-text-success {
color: #22af47;
}
.avatar .avatar-text.avatar-text-green:before,
.avatar .avatar-text.avatar-text-success:before {
background: rgba(188, 231, 199, 0.5);
}
.avatar .avatar-text.avatar-text-red,
.avatar .avatar-text.avatar-text-danger {
color: #f83f37;
}
.avatar .avatar-text.avatar-text-red:before,
.avatar .avatar-text.avatar-text-danger:before {
background: rgba(253, 197, 195, 0.5);
}
.avatar .avatar-text.avatar-text-yellow,
.avatar .avatar-text.avatar-text-warning {
color: #ffbf36;
}
.avatar .avatar-text.avatar-text-yellow:before,
.avatar .avatar-text.avatar-text-warning:before {
background: rgba(255, 236, 194, 0.5);
}
.avatar .avatar-text.avatar-text-pink {
color: #ed1b60;
}
.avatar .avatar-text.avatar-text-pink:before {
background: rgba(250, 186, 207, 0.5);
}
.avatar .avatar-text.avatar-text-purple {
color: #ab26aa;
}
.avatar .avatar-text.avatar-text-purple:before {
background: rgba(230, 189, 229, 0.5);
}
.avatar .avatar-text.avatar-text-violet {
color: #6640b2;
}
.avatar .avatar-text.avatar-text-violet:before {
background: rgba(209, 197, 232, 0.5);
}
.avatar .avatar-text.avatar-text-indigo {
color: #3a55b1;
}
.avatar .avatar-text.avatar-text-indigo:before {
background: rgba(196, 204, 231, 0.5);
}
.avatar .avatar-text.avatar-text-blue {
color: #0092ee;
}
.avatar .avatar-text.avatar-text-blue:before {
background: rgba(178, 222, 250, 0.5);
}
.avatar .avatar-text.avatar-text-teal {
color: #009b84;
}
.avatar .avatar-text.avatar-text-teal:before {
background: rgba(178, 225, 218, 0.5);
}
.avatar .avatar-text.avatar-text-neon {
color: #88c241;
}
.avatar .avatar-text.avatar-text-neon:before {
background: rgba(219, 237, 198, 0.5);
}
.avatar .avatar-text.avatar-text-lime {
color: #d0d962;
}
.avatar .avatar-text.avatar-text-lime:before {
background: rgba(241, 244, 208, 0.5);
}
.avatar .avatar-text.avatar-text-sun {
color: #fde335;
}
.avatar .avatar-text.avatar-text-sun:before {
background: rgba(254, 247, 194, 0.5);
}
.avatar .avatar-text.avatar-text-orange {
color: #ff9528;
}
.avatar .avatar-text.avatar-text-orange:before {
background: rgba(255, 223, 190, 0.5);
}
.avatar .avatar-text.avatar-text-pumpkin {
color: #ff6028;
}
.avatar .avatar-text.avatar-text-pumpkin:before {
background: rgba(255, 207, 190, 0.5);
}
.avatar .avatar-text.avatar-text-brown {
color: #7a5449;
}
.avatar .avatar-text.avatar-text-brown:before {
background: rgba(215, 203, 200, 0.5);
}
.avatar .avatar-text.avatar-text-gold {
color: #c1993f;
}
.avatar .avatar-text.avatar-text-gold:before {
background: rgba(236, 224, 197, 0.5);
}
.avatar .avatar-text.avatar-text-grey,
.avatar .avatar-text.avatar-text-secondary {
color: #9e9e9e;
}
.avatar .avatar-text.avatar-text-grey:before,
.avatar .avatar-text.avatar-text-secondary:before {
background: rgba(226, 226, 226, 0.5);
}
.avatar .avatar-text.avatar-text-inv-cyan,
.avatar .avatar-text.avatar-text-inv-info {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-cyan:before,
.avatar .avatar-text.avatar-text-inv-info:before {
background-color: #1ebccd !important;
}
.avatar .avatar-text.avatar-text-inv-sky,
.avatar .avatar-text.avatar-text-inv-primary {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-sky:before,
.avatar .avatar-text.avatar-text-inv-primary:before {
background-color: #00acf0 !important;
}
.avatar .avatar-text.avatar-text-inv-green,
.avatar .avatar-text.avatar-text-inv-success {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-green:before,
.avatar .avatar-text.avatar-text-inv-success:before {
background-color: #22af47 !important;
}
.avatar .avatar-text.avatar-text-inv-red,
.avatar .avatar-text.avatar-text-inv-danger {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-red:before,
.avatar .avatar-text.avatar-text-inv-danger:before {
background-color: #f83f37 !important;
}
.avatar .avatar-text.avatar-text-inv-yellow,
.avatar .avatar-text.avatar-text-inv-warning {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-yellow:before,
.avatar .avatar-text.avatar-text-inv-warning:before {
background-color: #ffbf36 !important;
}
.avatar .avatar-text.avatar-text-inv-pink {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-pink:before {
background-color: #ed1b60 !important;
}
.avatar .avatar-text.avatar-text-inv-purple {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-purple:before {
background-color: #ab26aa !important;
}
.avatar .avatar-text.avatar-text-inv-violet {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-violet:before {
background-color: #6640b2 !important;
}
.avatar .avatar-text.avatar-text-inv-indigo {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-indigo:before {
background-color: #3a55b1 !important;
}
.avatar .avatar-text.avatar-text-inv-blue {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-blue:before {
background-color: #0092ee !important;
}
.avatar .avatar-text.avatar-text-inv-teal {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-teal:before {
background-color: #009b84 !important;
}
.avatar .avatar-text.avatar-text-inv-neon {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-neon:before {
background-color: #88c241 !important;
}
.avatar .avatar-text.avatar-text-inv-lime {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-lime:before {
background-color: #d0d962 !important;
}
.avatar .avatar-text.avatar-text-inv-sun {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-sun:before {
background-color: #fde335 !important;
}
.avatar .avatar-text.avatar-text-inv-orange {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-orange:before {
background-color: #ff9528 !important;
}
.avatar .avatar-text.avatar-text-inv-pumpkin {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-pumpkin:before {
background-color: #ff6028 !important;
}
.avatar .avatar-text.avatar-text-inv-brown {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-brown:before {
background-color: #7a5449 !important;
}
.avatar .avatar-text.avatar-text-inv-gold {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-gold:before {
background-color: #c1993f !important;
}
.avatar .avatar-text.avatar-text-inv-grey,
.avatar .avatar-text.avatar-text-inv-secondary {
color: #fff;
}
.avatar .avatar-text.avatar-text-inv-grey:before,
.avatar .avatar-text.avatar-text-inv-secondary:before {
background-color: #9e9e9e !important;
}
.avatar-group {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.avatar-group .avatar {
font-size: .9rem;
width: 2.625rem;
height: 2.625rem;
}
.avatar-group .avatar .avatar-img,
.avatar-group .avatar .avatar-text {
border: 2px solid #fff;
}
.avatar-group.avatar-group-overlapped .avatar {
margin-right: -13px;
}
.avatar-group.avatar-group-overlapped .avatar:hover {
z-index: 1;
}
.avatar-group.avatar-group-lg .avatar {
font-size: .95rem;
width: 3.25rem;
height: 3.25rem;
}
.avatar-group.avatar-group-lg.avatar-group-overlapped .avatar {
margin-right: -15px;
}
.avatar-group.avatar-group-sm .avatar {
font-size: .6rem;
width: 2rem;
height: 2rem;
}
.avatar-group.avatar-group-sm.avatar-group-overlapped .avatar {
margin-right: -10px;
}
