box-shadow スタイルを有効にする

Bootstrap4の $enable-shadows を有効にした場合に変更される主なCSSスタイル。

$enable-shadows を有効にする方法
  1. ツールのセットアップを実行。
  2. Bootstrap4のソースファイルの /scss/_variables.scss の Options の項目にある
    $enable-shadows: false !default; を $enable-shadows: true !default; に変更。
  3. コマンドラインから npm run test を実行。
  4. dist/ 内のファイル全てが更新されるので、css/bootstrap.css または css/bootstrap.min.css を自分のサイトのものと差し替える。

<kbd>の陰影

ユーザーが入力した内容を表示するにはユーザー入力のようにします。

イメージサムネイルの陰影

プレースホルダ200x200

ボタンの陰影

アクティブボタンの陰影

ドロップダウンのメニューの陰影

メニュー1 メニュー2 メニュー3
その他リンク

ドロップダウンボタン付きボタングループの陰影

ドロップダウンリンク ドロップダウンリンク

フォームコントロールの陰影

カスタムチェックボックスの陰影

カスタムラジオボタンの陰影

カスタムレンジ入力の陰影

カスタム選択メニューの陰影

カスタムファイル選択の陰影

モーダルの陰影

ポップオーバーの陰影

プログレスバーの最大値の陰影

閉じる