影

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>