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

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.jpeg" class="float-left">
<img src="sample.jpeg" class="float-right">
</div>

// Flexbox
<div class="d-flex">
  <div><img src="sample.jpeg"></div>
  <div><img src="sample.jpeg"></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


コンテンツをシェア


このエントリーをはてなブックマークに追加