Bootstrapで画像を丸く表示するrounded-circleの使い方

Bootstrap4では四角い画像を簡単に丸い形で表示することができます。

四角い画像を丸く表示する「rounded-circle」

通常、画像をWordPressで表示すると

のように四角く表示されますが、Bootstrap4では画像を編集することなく、簡単に丸く切り取ったような形で表示できます。

imgタグにrounded-circleクラスを指定するだけで簡単に

丸く切り取ったような形になります。

実際のソースは以下のようになります。

<img src="画像のURL" class="rounded-circle">

Bootstrap3までは「img-circle」で行けたようですがBootstrap4では「img-circle」は「Not Work」になっているので「rounded-circle」を使う必要があります。

まとめ

Bootstrap4では「rounded-circle」を使えば簡単に四角い画像を丸く切り取って表示することができます。

以上、「Bootstrapで画像を丸く表示するrounded-circleの使い方」でした。