Search code examples
htmlbootstrap-4badge

Bootstrap circle not round

I can't figure out what to do with the style, for it to display a really round circle instead of the elongated one.

Pretty new to HTML and bootstrap, don't rage at me.

Picture of the circle

<span data-mdb-toggle="tooltip" title="unread" class="badge rounded-pill bg-info" style="cursor: default">&nbsp;</span>

Solution

  • you need to add the same width and height, so you get a completely round circle.

    see this picture for more clarity