.img-fluid
を指定すると、ウィンドウの広さに応じて自動的に横幅が調整されるレスポンシブ画像とすることができます。
<img src="1024x40.png" class="img-fluid"> <img src="1024x40.png" class="">
.img-thumbnail
を指定すると、画像の周りに .25rem の枠線を描画します。
<img src="80x80.png" class="img-thumbnail">
.rounded
を指定すると、画像の角を丸くします。
<img src="80x80.png" class="rounded">
.float-left
, .float-right
は画像を左寄せ、右寄せします。テキストの回り込みが行われるので、回り込みを解除するには .clearfix
を指定します。
<div class="clearfix"> <img src="80x80.png" class="float-left"> <img src="80x80.png" class="float-right"> </div>
.mx-auto
, d-block
を指定すると、中央に表示します。
<img src="80x80.png" class="mx-auto d-block">