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 インライン表示のspan
  <span class="bg-primary text-white">インライン表示のspan</span>
  <span class="bg-dark text-white">インライン表示のspan</span>
■ディスプレー:Display:ユーティリティ:spanをd-blockで利用

ブロック表示のspan ブロック表示のspan
  <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>