Bootstrap 4 Img-Circle Class Doesn't Seem to Exist
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...
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 :)
4 Answers
It's now called rounded-circle as explained here in the BS4 docs
<img src="img/gallery2.JPG" class="rounded-circle">
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.
Now the class is this
<img src="img/img5.jpg" width="200px" class="rounded-circle float-right">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;
}
Elena Rostova holds a Master's degree in Public Health Journalism. She covers groundbreaking medical research, holistic wellness trends, mental health awareness, and nutritional science.
