Bootstrap 4 img-circle class not working

html css twitter-bootstrap bootstrap-4
Cal Courtney picture Cal Courtney · Dec 7, 2016 · Viewed 101.4k times · Source

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 :)

Answer

Zim picture Zim · Dec 7, 2016

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

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

Demo

Related questions

Bootstrap NavBar with left, center or right aligned items

In Bootstrap, what is the most platform-friendly way to create a navigation bar that has Logo A on the left, menu items in the center, and Logo B on the right? Here is what I've tried so far, and it …

Read More
Vertical Align Center in Bootstrap 4

I am trying to center my Container in the middle of the page using Bootstrap 4. I have been unsuccessful thus far. Any help would be appreciated. I have built it at Codepen.io so you guys can play with it …

Read More
How to make Bootstrap 4 cards the same height in card-columns?

I am using Bootstrap 4 alpha 2 and taking advantage on cards. Specifically, I am working with this example taken from the official docs. How can I make all cards to be the same height? All I can think by now is …

Read More