text-white

bootstrap5.css

bootstrap5.css
.text-white {
  color: #fff !important;
}
bootstrap5.css
.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !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 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-columns

...

カード01

ここに文章が入ります

カード02

文章

文章
...

カード03

文章

文章

カード04

文章

文章

カード05

文章

文章

...

カード07

文章

文章

カード08

文章

文章

  <div class="card-columns">
    <!-- ★複数のカードをレイアウトするためにcard-columnsを使う、flex同様、自動整列される -->
    <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>

文字に色をつける：text-primary

text-primary

text-secondary

text-success

text-danger

text-warning

text-info

text-light

text-dark

text-body

text-muted

text-white

text-black-50

text-white-50

  <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>

背景に色を付ける：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-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>

devで背景色とテキストの文字

ブロック表示のdiv
ブロック表示のdiv
  <div class="bg-primary text-white">ブロック表示のdiv</div>
  <div class="bg-dark text-white">ブロック表示のdiv</div>

インライン表示の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>

インライン表示のspan：span

インライン表示のspan インライン表示のspan 
  <span class="bg-primary text-white">インライン表示のspan</span>
  <span class="bg-dark text-white">インライン表示のspan</span>

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

要素の表示／非表示を設定する：d-lg-none

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-togglerとnavbar-toggler-icon

  <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>