bg-warning

bootstrap5.css

bootstrap5.css
.bg-warning {
  background-color: #ffc107 !important;
}
bootstrap5.css
a.bg-warning:hover,
a.bg-warning:focus,
button.bg-warning:hover,
button.bg-warning:focus {
  background-color: #d39e00 !important;
}

html bootstrap5 Sample

カードの背景色と文字色の設定：text-whiteとbg-primary

背景色、文字色指定なし

カードのタイトル

カードの内容

背景色：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 bg-warning text-dark">text-white bg-warning text-dark">bg-primary mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色：bg-warning text-dark">bg-primary、文字色：bg-warning text-dark">text-white</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>
  <div class="card bg-warning text-dark">text-white bg-secondary mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色：bg-secondary、文字色：bg-warning text-dark">text-white</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>
  <div class="card bg-warning text-dark">text-white bg-success mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色：bg-success、文字色：bg-warning text-dark">text-white</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>
  <div class="card bg-warning text-dark">text-white bg-danger mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色：bg-danger、文字色：bg-warning text-dark">text-white</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>
  <div class="card bg-warning text-dark">text-white bg-warning mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色：bg-warning、文字色：bg-warning text-dark">text-white</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>
  <div class="card bg-warning text-dark">text-white bg-info mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色：bg-info、文字色：bg-warning text-dark">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 bg-warning text-dark">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>

背景に色を付ける：bg-primary

bg-primary

bg-secondary

bg-success

bg-danger

bg-warning

bg-info

bg-light

bg-dark

bg-white

bg-transparent

  <div class="text-center">
    <p><a href="#" class="bg-warning text-dark">bg-primary text-white d-block py-2">bg-warning text-dark">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>

背景色用のクラス：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>

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>

角丸：rounded

rounded rounded-top rounded-right rounded-bottom rounded-left rounded-circle rounded-0 
  <!-- 背景色を設定しない限り適用されない、背景に適用される -->
  <span class="rounded bg-warning">rounded</span>
  <span class="rounded-top bg-warning">rounded-top</span>
  <span class="rounded-right bg-warning">rounded-right</span>
  <span class="rounded-bottom bg-warning">rounded-bottom</span>
  <span class="rounded-left bg-warning">rounded-left</span>
  <!-- サークル -->
  <span class="rounded-circle bg-warning">rounded-circle</span>
  <span class="rounded-0 bg-warning">rounded-0</span>

プログレスバーの色：progress-barとbg-*

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

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

  <div class="progress mb-3">
    <div class="progress-bar bg-warning text-dark">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 bg-warning text-dark">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 bg-warning text-dark">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 bg-warning text-dark">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 bg-warning text-dark">progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100"
      aria-valuemin="0" aria-valuemax="100"></div>
  </div>