bootstrap4.css
.text-white {
color: #fff !important;
}
bootstrap4.css
.text-white-50 {
color: rgba(255, 255, 255, 0.5) !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>
■カード：card：コンポーネント：カードカラムによるレイアウト card-columns
カード01
ここに文章が入ります
カード02
ここに文章が入ります
カード03
ここに文章が入ります
ここに文章が入ります
カード04
ここに文章が入ります
カード05
ここに文章が入ります
この文章はダミーです。
カード07
ここに文章が入ります
カード08
ここに文章が入ります
ここに文章が入ります
<div class="card-columns">
<!-- カード01 -->
<div class="card"> <img class="card-img-top" src="https://via.placeholder.com/640x480/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード01</h4>
<p class="card-text">ここに文章が入ります</p>
</div>
</div>
<!-- カード02 -->
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>カード02</p>
<p>ここに文章が入ります</p>
<footer class="blockquote-footer"> <small class="text-muted"> ここに文章が入ります </small> </footer>
</blockquote>
</div>
<!-- カード03 -->
<div class="card"> <img class="card-img-top" src="https://via.placeholder.com/640x480/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード03</h4>
<p class="card-text">ここに文章が入ります</p>
<p class="card-text"><small class="text-muted">ここに文章が入ります</small></p>
</div>
</div>
<!-- カード04 -->
<div class="card bg-secondary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>カード04</p>
<p>ここに文章が入ります</p>
<footer class="blockquote-footer"> <small> ここに文章が入ります </small> </footer>
</blockquote>
</div>
<!-- カード05 -->
<div class="card text-center">
<div class="card-body">
<h4 class="card-title">カード05</h4>
<p class="card-text">ここに文章が入ります</p>
<p class="card-text"><small class="text-muted">この文章はダミーです。</small></p>
</div>
</div>
<!-- カード06 -->
<div class="card"> <img class="card-img" src="https://via.placeholder.com/640x480/FFFF00/000000?text=Card 06" alt="..."> </div>
<!-- カード07 -->
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>カード07</p>
<p>ここに文章が入ります</p>
<footer class="blockquote-footer"> <small class="text-muted"> この文章はダミーです。 </small> </footer>
</blockquote>
</div>
<!-- カード08 -->
<div class="card">
<div class="card-body">
<h4 class="card-title">カード08</h4>
<p class="card-text">ここに文章が入ります</p>
<p class="card-text"><small class="text-muted">ここに文章が入ります</small></p>
</div>
</div>
</div>
■色Color：bg-primary：ユーティリティ：文字に色をつける
<div class="text-center">
<p><a href="#" class="text-primary">text-primary</a></p>
<p><a href="#" class="text-secondary">text-secondary</a></p>
<p><a href="#" class="text-success">text-success</a></p>
<p><a href="#" class="text-danger">text-danger</a></p>
<p><a href="#" class="text-warning">text-warning</a></p>
<p><a href="#" class="text-info">text-info</a></p>
<p><a href="#" class="text-light bg-dark">text-light</a></p>
<p><a href="#" class="text-dark">text-dark</a></p>
<p><a href="#" class="text-body">text-body</a></p>
<p><a href="#" class="text-muted">text-muted</a></p>
<p><a href="#" class="text-white bg-dark">text-white</a></p>
<p><a href="#" class="text-black-50">text-black-50</a></p>
<p><a href="#" class="text-white-50 bg-dark">text-white-50</a></p>
</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>
■ディスプレー：Display：ユーティリティ：devで背景色とテキストの文字
ブロック表示のdiv
ブロック表示のdiv
<div class="bg-primary text-white">ブロック表示のdiv</div>
<div class="bg-dark text-white">ブロック表示のdiv</div>
■ディスプレー：Display：ユーティリティ：divをd-inlineで利用
インライン表示のdiv
インライン表示のdiv
<div class="d-inline bg-primary text-white">インライン表示のdiv</div>
<div class="d-inline bg-dark text-white">インライン表示のdiv</div>
■ディスプレー：Display：ユーティリティ：spanで利用
<span class="bg-primary text-white">インライン表示のspan</span>
<span class="bg-dark text-white">インライン表示のspan</span>
■ディスプレー：Display：ユーティリティ：spanをd-blockで利用
<span class="d-block bg-primary text-white">ブロック表示のspan</span>
<span class="d-block bg-dark text-white">ブロック表示のspan</span>
■ディスプレー：Display：ユーティリティ：要素の表示／非表示を設定するレスポンシブなクラス
lgより大きい画面幅で非表示
lgより大きい画面幅で表示
<div class="d-lg-none bg-primary text-white">lgより大きい画面幅で非表示</div>
<div class="d-none d-lg-block bg-secondary text-white">lgより大きい画面幅で表示</div>
■ナビゲーションバー：navbar：コンポーネント：外部コンテンツの表示／非表示
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h4 class="text-white">折り畳みコンテンツ</h4>
<span class="text-muted">ナビゲーションバーブランド経由で切り替え可</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
</nav>