bootstrap4

bootstrap4.css

.bg-info {
  background-color: #17a2b8 !important;
}

bootstrap4.css

a.bg-info:hover, a.bg-info:focus,
button.bg-info:hover,
button.bg-info:focus {
  background-color: #117a8b !important;
}

■カード：card：コンポーネント：カードの背景色と文字色の設定

背景色、文字色指定なし

カードのタイトル

カードの内容

背景色：bg-primary、文字色：text-white

カードのタイトル

カードの内容

背景色：bg-secondary、文字色：text-white

カードのタイトル

カードの内容

背景色：bg-success、文字色：text-white

カードのタイトル

カードの内容

背景色：bg-danger、文字色：text-white

カードのタイトル

カードの内容

背景色：bg-warning、文字色：text-white

カードのタイトル

カードの内容

背景色：bg-info、文字色：text-white

カードのタイトル

カードの内容

背景色：bg-light

カードのタイトル

カードの内容

カードのヘッダー

カードのタイトル

カードの内容

  <div class="card mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色、文字色指定なし</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>
  <div class="card text-white bg-primary mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色：bg-primary、文字色：text-white</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>
  <div class="card text-white bg-secondary mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色：bg-secondary、文字色：text-white</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>
  <div class="card text-white bg-success mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色：bg-success、文字色：text-white</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>
  <div class="card text-white bg-danger mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色：bg-danger、文字色：text-white</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>
  <div class="card text-white bg-warning mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色：bg-warning、文字色：text-white</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>
  <div class="card text-white bg-info mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色：bg-info、文字色：text-white</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>
  <div class="card bg-light mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色：bg-light</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>
  <div class="card text-white bg-dark mb-3" style="max-width: 25rem;">
    <div class="card-header">カードのヘッダー</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>

■色Color：bg-primary：ユーティリティ：背景に色を付ける

<div class="text-center">
  <p><a href="#" class="bg-primary text-white d-block py-2">bg-primary</a></p>
  <p><a href="#" class="bg-secondary text-white d-block py-2">bg-secondary</a></p>
  <p><a href="#" class="bg-success text-white d-block py-2">bg-success</a></p>
  <p><a href="#" class="bg-danger text-white d-block py-2">bg-danger</a></p>
  <p><a href="#" class="bg-warning text-dark d-block py-2">bg-warning</a></p>
  <p><a href="#" class="bg-info text-white d-block py-2">bg-info</a></p>
  <p><a href="#" class="bg-light text-dark d-block py-2">bg-light</a></p>
  <p><a href="#" class="bg-dark text-white d-block py-2">bg-dark</a></p>
  <p><a href="#" class="bg-white text-dark d-block py-2">bg-white</a></p>
  <p><a href="#" class="bg-transparent d-block py-2">bg-transparent</a></p>
</div>

■テーブル：table：：背景色用のクラス　bg-*

タイトル	タイトル	タイトル	タイトル
なし（標準）	データ	データ	データ
bg-primary	データ	データ	データ
bg-success	データ	データ	データ
bg-warning	データ	データ	データ
bg-danger	データ	データ	データ
bg-info	データ	データ	データ

  <table class="table table-dark">
    <thead>
      <tr>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>なし（標準）</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="bg-primary">
        <td>bg-primary</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="bg-success">
        <td>bg-success</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="bg-warning">
        <td>bg-warning</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="bg-danger">
        <td>bg-danger</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="bg-info">
        <td>bg-info</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>

■テーブル：table：：th,tdでbg-の背景色

th（標準）	th.bg-primary
td.bg-success	td.bg-warning
td.bg-danger	td.bg-info

  <table class="table table-dark">
    <tr>
      <th>th（標準） </th>
      <th class="bg-primary">th.bg-primary</th>
    </tr>
    <tr>
      <td class="bg-success">td.bg-success</td>
      <td class="bg-warning">td.bg-warning</td>
    </tr>
    <tr>
      <td class="bg-danger">td.bg-danger </td>
      <td class="bg-info">td.bg-info</td>
    </tr>
  </table>

■ドロップダウン：dropdown-menu：コンポーネント：ドロップダウンメニューのオーバーフローを制約する境界を設定する

  <div class="bg-info text-center" style="width:250px;height:250px;overflow:scroll;">
    <br><br><br>
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-boundary="scrollParent">ドロップダウンボタン</button>
      <div class="dropdown-menu">
        <a href="#" class="dropdown-item">スクロールウィンドウ幅で制約されるドロップダウンメニュー</a>
        <a href="#" class="dropdown-item">スクロールウィンドウ幅で制約されるドロップダウンメニュー</a>
        <a href="#" class="dropdown-item">スクロールウィンドウ幅で制約されるドロップダウンメニュー</a>
      </div>
    </div>
  </div>

■プログレスバー：progress：：プログレスバーの背景 bg-info

  <div class="progress mb-3">
    <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
  </div>

■プログレスバー：progress：：プログレスバーのストライプをアニメーションさせる

  <div class="progress mb-3">
    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
  </div>

■プログレスバー：progress：：複数のプログレスバーを積み重ねる

  <div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
  </div>

■プログレスバー：progress：：プログレスバーをストライプにする

  <div class="progress mb-3">
    <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
  </div>