card text-white bg-danger mb-3
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 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>