【初心者の方向け】 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="・・・" />

目次