メインコンテンツへスキップ

陰影ユーティリティ(Shadows)

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

目次

実例(Examples)

Bootstrapではコンポーネントの影はデフォルトでは無効になっており、$enable-shadows で有効にすることも可能だが、box-shadow ユーティリティクラスで影を追加や削除可能。.shadow-none と3つのデフォルトサイズ(対応する変数が一致)のサポートを含む。

影の種類
影なし:.shadow-none
小さめの影:.shadow-sm
標準の影:.shadow
大きめの影:.shadow-lg
設定例
<div class="shadow-none p-3 mb-5 bg-light rounded">...</div>
【設定】
  • 影を入れたいか削除したい要素に .shadow(-{size}) を入れる(.shadow(-{size}) は上記「影の種類」から選択)