bootstrap4.css
.bg-danger {
background-color: #dc3545 !important;
}
bootstrap4.css
a.bg-danger:hover, a.bg-danger:focus,
button.bg-danger:hover,
button.bg-danger:focus {
background-color: #bd2130 !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>
■親要素でフロートを解除する:Clearfix:ユーティリティ:親要素で設定して、フロートを解除するためのクラス(重なっていない浮いているから背景色出る)
右フロート
<div class="w-50 mx-auto bg-danger clearfix">
<div class="float-right bg-success">右フロート</div>
</div>
■親要素でフロートを解除する:Clearfix:ユーティリティ:フロートを解除しない(重なっているので背景色がでない)
右フロート
<div class="w-50 mx-auto bg-danger">
<div class="float-right bg-success">右フロート</div>
</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>
■プログレスバー:progress::プログレスバーの背景 bg-danger
<div class="progress mb-3">
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" 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 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>