Bootstrap 4 img-circle class doesn't seem to exist

HtmlCssTwitter BootstrapBootstrap 4

Html Problem Overview


I'm writing a website in HTML5 and Bootstrap 4 and I'm trying to turn a square image into a circle. In Bootstrap 3 this was easily do-able with .img-circle, but now I can't seem to get it to work and I can't find any answers online. Has Bootstrap dropped the img-circle class or is my code messed up?

It goes something like this:

<!-- Within a tab-content div --> 
<div class="col-xs-7">
    <img src="img/gallery2.JPG" class="img-circle" alt="HelPic">
</div>

Hope somebody can help me out :)

Html Solutions


Solution 1 - Html

It's now called rounded-circle as explained here in the BS4 docs

<img src="img/gallery2.JPG" class="rounded-circle">

Demo

Solution 2 - Html

In Bootstrap 4 and Bootstrap 5 it was .rounded-circle

Usage :

<div class="col-xs-7">
    <img src="img/gallery2.JPG" class="rounded-circle" alt="HelPic>
</div>

See migration docs from bootstrap.

Solution 3 - Html

Now the class is this

 <img src="img/img5.jpg" width="200px" class="rounded-circle float-right">

Solution 4 - Html

I arrived here via google because I couldn't get rounded edges on images, here's how I solved;

.rounded-xl {
   border-radius: 1.5rem;
}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionCal CourtneyView Question on Stackoverflow
Solution 1 - HtmlZimView Answer on Stackoverflow
Solution 2 - HtmlsisindrymedagamView Answer on Stackoverflow
Solution 3 - HtmlIrving Jaime Salgado LinaresView Answer on Stackoverflow
Solution 4 - HtmlstevecView Answer on Stackoverflow