box-shadow ユーティリティを使用して要素に影を追加または削除します。

コンポーネントの影は Bootstrap ではデフォルトで無効になっており、 を介して有効にすることができますが、ユーティリティ クラスを使用$enable-shadowsして影をすばやく追加または削除することもできます。および 3 つのデフォルト サイズ (一致する変数が関連付けられています)box-shadowのサポートが含まれます。.shadow-none

影なし
小さな影
通常の影
大きい影
<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>
<div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>