How to make avatar with bootstrap 5?

Question

I am using Bootstrap 5 and I want to make avatar with different icons in it (simmilar as letter avatar). So, I need to have placeholder and inside that placeholder i need to add the icon. Something like the code:

<div width="30%" height="30%" class="bg-info rounded-circle">
<span>
{Icon here}
</span>
</div>

But this is not working. Can anyone help me how to do this?

Can you give any examples? You can also create a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) and show us what problems you are facing while attempting to do this — I_love_vegetables, Aug 18 '21 at 07:41
@I_love_vegetables I need to do something like letter avatar, but if i use bootstrap `
NG
` - The background color is not changing and the borders arent getting rounded. — Kate, Aug 18 '21 at 07:53

score 6 · Accepted Answer · answered Aug 18 '21 at 10:15

6

There is a ready-to-use stylesheet for bootstrap called bootstrap-avatar at github: bootstrap-avatar

The other way is using plain css to build it. It is quite easy by the way. Here is an example: Building avatars using css

Also, if you are using inline css, you have to wrap it into style like that:

<div style="width:30%;" class="bg-info rounded-circle">

answered Aug 18 '21 at 10:15

pybugHTL

72
7

Thank you, i will try this now – Kate Aug 18 '21 at 10:19

score 2 · Answer 2 · answered Jan 20 '22 at 09:50

Here is the documentation I've used to create the solution.

Check out this snippet - I think this is exactly what you are trying to achieve.

Bootstrap Avatar with Icon

The key is to set a fixed width and add the .rounded-circle class - but you also have to properly align the icon within the rounded div.

This example is from a GitHub repository dedicated to Bootstrap Avatars.

score 1 · Answer 3 · answered Nov 10 '21 at 13:31

For me this is how I normally use it:

Step 1) Add HTML:

<img src="avatar.png" alt="Avatar" class="avatar">

Step 2) Add CSS: Set a matching height and width that looks good, and use the border-radius property to add rounded corners to an image. 50% will make the image circular:

 .avatar {
    vertical-align: middle;
    width: 50px;
    height: 50px;
    border-radius: 50%;
 }

How to make avatar with bootstrap 5?

3 Answers3