画像スタイル、レスポンスイメージ:Bootstrap 4

Bootstrap4の画像装飾に関するクラス
サンプル画像はhttps://freephotos.cc/jaを使わせていただきました。

角丸（.rounded）

<img src="" class="rounded">

丸（.rounded-circle）

<img src="" class="rounded-circle">

サムネイル（.img-thumbnail）

<img src="" class="img-thumbnail">

レスポンシブイメージ（.img-fluid）

画像を横幅100%に合わせて表示します。

<img src="" class="img-fluid">

画像の水平位置

画像の水平位置の横並びは、floatか、Flexユーティリティで設定できます。

// Float
<div class="clearfix">
<img src="sample.jpg" class="float-left">
<img src="sample.jpg" class="float-right">
</div>

// Flexbox
<div class="d-flex">
  <div><img src="sample.jpg"></div>
  <div><img src="sample.jpg"></div>
</div>

枠線

画像の枠線は「.border」で1px グレー（#dee2e）の枠線が付きます。
枠線を調整するには枠線クラスと、枠線の色を指定します。

 
 
border

 
border-top
border-success

border
border-dark
border-top-0

 
border
border-danger

枠線クラス

枠線の追加

• .border
• .border-top
• .border-right
• .border-bottom
• .border-left

枠線の削除

• border-0
• border-top-0
• border-right-0
• border-bottom-0
• border-left-0

色クラス

• border-primary
• border-secondary
• border-success
• border-danger
• border-warning
• border-info
• border-light
• border-dark
• border-white