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

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

「Webサイトからお問い合わせが来ない…」とお悩みの方必見!
当サイトのノウハウを詰め込んだ『Web集客の無料ガイド』をご提供

角丸(.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

関連タグ:

【期間限定プラン】簡単!ホームページセットアッププラン お申し込みは2022年7月29日(金)15:00まで

CPIの最新情報をTwitterでチェックできます!
@cpiadjp
次へ
前へ