メインコンテンツにスキップ ドキュメントナビゲーションにスキップ
Check

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

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

※v5.2.0-beta1はプレリリースのため、"v5.2.0"での変更は再変更される可能性があります。
このページの項目

実例(Examples)

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

影の種類
影なし.shadow-nonebox-shadow: none
小さめの影.shadow-smbox-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%)
デフォルトの影.shadowbox-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%)
大きめの影.shadow-lgbox-shadow: 0 1rem 3rem rgb(0 0 0 / 18%)
設定例
<div class="shadow-none p-3 mb-5 bg-light rounded">...</div>
【設定】
  • 影を入れたいか削除したい要素に .shadow(-{size}) を入れる(.shadow(-{size}) は上記「影の種類」から選択)

Sass v5.0.0-beta3追加

変数(Variables)

デフォルトの設定
scss/_variables.scss 内 box-shadow-variables の設定$box-shadow:                  0 .5rem 1rem rgba($black, .15);
$box-shadow-sm:               0 .125rem .25rem rgba($black, .075);
$box-shadow-lg:               0 1rem 3rem rgba($black, .175);
$box-shadow-inset:            inset 0 1px 2px rgba($black, .075);

ユーティリティAPI(Utilities API)

陰影ユーティリティは、scss/_utilities.scss のユーティリティAPIで宣言されている。ユーティリティAPIの使用方法はこちらを参照。

デフォルトの設定
scss/_utilities.scss 内 utils-shadow の設定"shadow": (
  property: box-shadow,
  class: shadow,
  values: (
    null: $box-shadow,
    sm: $box-shadow-sm,
    lg: $box-shadow-lg,
    none: none,
  )
),