Shadows

Shadows(シャドー)を適用すると要素に影をつけることができます。シャドーユーティリティの使い方の例を示します。

Examples

コンポーネントの影はデフォルトでは無効になっています。( $enable-shadows で有功にすることもできます。)
box-shadow を使うと影の追加や削除ができます。例のように shadow-none では影を削除します。

No shadow

Small shadow

Regular shadow

Larger shadow

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

v4.3