【初心者の方向け】 Bootstrap4の使い方 ボックスシャドウ

要素に影をつける事ができるボックスシャドウ(box-shadow)は、bootstrapではshadow-○○で指定する事もできます。

Bootstrap4のバージョン4.3をベースに書いています。

要素に影をつける

shadow-noneを追加

shadow-smを追加

shadowを追加

shadow-lgを追加

コード

<div class="shadow-none">影なし</div>
<div class="shadow-sm">影を小さく</div>
<div class="shadow">影を標準的に</div>
<div class="shadow-lg">影を大きく</div>

画像に影をつける

画像にshadowを指定した場合はこのように表示されます。
画像には画像表示の際に書いたimg-thumbnailも加えています。

Instagramなどフラットな表示が流行りですが、一覧画像などを表示させる場合にいかがでしょうか？

コード

<img class="shadow img-thumbnail" src="・・・" alt="・・・" />

関連投稿:

【初心者の方向け】 Bootstrap4の使い方 ボタン作成 【初心者の方向け】 Bootstrap4の使い方 テーブル CSSのみでテキストや画像にぼかし効果を付ける 【初心者の方向け】 Bootstrap4の使い方 ボーダー