React Bootstrap Avatar Component
Avatar with Bootstrap Styling
Bootstrap 5 components designed for React.js
This component is part of the CoreUI for React.js UI components library, which offers all Bootstrap components designed to work seamlessly with React.js.
If you want to use Bootstrap 5 in a React.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.
Learn how to use CoreUI’s React Avatar component styled with Bootstrap to display profile images, icons, initials, and status indicators in a consistent and responsive design.
Image avatars#
Use Bootstrap-styled React avatars to display user profile images in a circular format — ideal for representing user accounts and contacts.
Letter avatars#
Display user initials using letter-based avatars. A perfect fallback when images aren’t available, and still visually consistent with Bootstrap styling.
Icon avatars#
Insert icons into avatars for representing roles, objects, or placeholder users. Supports vector icons with Bootstrap-friendly layout.
Rounded avatars#
Use the shape="rounded" prop to apply Bootstrap’s rounded corners to the avatar, giving it a subtle square-rounded appearance.
Square avatars#
To make avatars fully square with no border radius, apply shape="rounded-0", matching Bootstrap’s rounded-0 utility style.
Sizes#
Customize avatar size using the size prop. Available options include xl, lg, md, and sm, aligning with Bootstrap’s scalable design system.
Avatars with status#
Add a small status indicator (e.g. online, offline) to avatars using the status prop — useful for chat interfaces or user dashboards.
API reference#
Refer to the API below for all configurable props used with the Bootstrap-styled React Avatar component.