https://github.com/mdbootstrap/bootstrap-avatars

Responsive Avatars built with Bootstrap 5. Various templates like a circle avatar, square, inside the navbar, carousel, as a testimonial, profile and many more.
https://github.com/mdbootstrap/bootstrap-avatars

avatar bootstrap bootstrap5 circle-image-view

Last synced: 6 months ago
JSON representation

Responsive Avatars built with Bootstrap 5. Various templates like a circle avatar, square, inside the navbar, carousel, as a testimonial, profile and many more.

Host: GitHub
URL: https://github.com/mdbootstrap/bootstrap-avatars
Owner: mdbootstrap
License: other
Created: 2021-08-12T14:08:12.000Z (over 4 years ago)
Default Branch: main
Last Pushed: 2022-01-24T10:36:54.000Z (over 4 years ago)
Last Synced: 2025-01-31T22:51:16.420Z (about 1 year ago)
Topics: avatar, bootstrap, bootstrap5, circle-image-view
Language: JavaScript
Homepage: https://mdbootstrap.com/docs/standard/extended/avatar/
Size: 1020 KB
Stars: 6
Watchers: 5
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: License.pdf

Awesome Lists containing this project

README

Responsive Avatars built with Bootstrap 5. Various templates like a circle avatar, square, inside the navbar, carousel, as a testimonial, profile and many more.

Check out [Bootstrap Avatars Documentation](https://mdbootstrap.com/docs/standard/extended/avatar/) for detailed instructions & even more examples.

## Basic example

![Bootstrap 5 Avatar](https://mdbootstrap.com/img/Marketing/github/avatar/basic.png)

```html

```

## How to use?

1. Download MDB 5 - free UI KIT

2. Choose your favourite customized component and click on the image

3. Copy & paste the code into your MDB project

[▶️ Subscribe to YouTube channel for web development tutorials & resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)

## More examples

[Bootstrap Avatar image with shadow:
![Bootstrap 5 Avatar](https://mdbootstrap.com/img/Marketing/github/avatar/shadow.png)](https://mdbootstrap.com/docs/standard/extended/avatar/#section-with-shadows)

[Bootstrap Square Avatar:
![Bootstrap 5 Avatar](https://mdbootstrap.com/img/Marketing/github/avatar/square.png)](https://mdbootstrap.com/docs/standard/extended/avatar/#section-square)

[Bootstrap Avatar avatar with sample content:
![Bootstrap 5 Avatar](https://mdbootstrap.com/img/Marketing/github/avatar/content.png)](https://mdbootstrap.com/docs/standard/extended/avatar/#section-with-content)

[Bootstrap Avatar inside navbar:
![Bootstrap 5 Avatar](https://mdbootstrap.com/img/Marketing/github/avatar/navbar.png)](https://mdbootstrap.com/docs/standard/extended/avatar/#section-inside-the-navbar)

[Bootstrap Avatar inside testimonial cards:
![Bootstrap 5 Avatar](https://mdbootstrap.com/img/Marketing/github/avatar/testimonials.png)](https://mdbootstrap.com/docs/standard/extended/avatar/#section-testimonials)

[Bootstrap Avatar inside a profile card:
![Bootstrap 5 Avatar](https://mdbootstrap.com/img/Marketing/github/avatar/profile.png)](https://mdbootstrap.com/docs/standard/extended/avatar/#section-profile)

___

## More extended Bootstrap documentation