要素に影をつける事ができるボックスシャドウ(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="・・・" />
