La classe img-circle de Bootstrap 4 ne fonctionne pas

Question

J'écris un site Web en HTML5 et Bootstrap 4 et j'essaie de transformer une image carrée en cercle. Dans Bootstrap 3, cela était facilement réalisable avec .img-circle Mais maintenant, je n'arrive pas à le faire fonctionner et je ne trouve aucune réponse en ligne. Bootstrap a-t-il abandonné la classe img-circle ou mon code est-il erroné ?

Ça donne quelque chose comme ça :

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

J'espère que quelqu'un pourra m'aider :)

Answer 1

Il s'appelle désormais rounded-circle comme expliqué ici dans les docs BS4

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

Démo

Answer 2

Sur Bootstrap 4 il a été renommé en .rounded-circle

Utilisation :

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

Voir migration docs du bootstrap.

Answer 3

Maintenant, la classe est la suivante

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

Answer 4

Je suis arrivé ici via google car je n'arrivais pas à obtenir des bords arrondis sur des images, voici comment j'ai résolu le problème ;

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