GitHub で表示

シャドウ

box-shadow ユーティリティーを使用して、要素にシャドウを追加または削除できます。

サンプル

Bootstrap のコンポーネントはデフォルトではシャドウが無効になっており、$enable-shadows を介して有効にできますが、box-shadow ユーティリティーを使用するとシャドウの追加または削除を迅速に行うことができます。.shadow-none のサポートと 3 つのデフォルトサイズ（関連する変数と一致）が含まれています。

シャドウなし

小さなシャドウ

標準のシャドウ

大きなシャドウ

<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>