text-dark

bootstrap5.css

bootstrap5.css
.text-dark {
  color: #212529 !important;
}

html bootstrap5 Sample

カードのデフォルトのボーダー色を変更する:border-primary


Header
Primary card title

カード本文XXXXXXXXXXXX

Header
Secondary card title

カード本文XXXXXXXXXXXX

Header
Success card title

カード本文XXXXXXXXXXXX

Header
Danger card title

カード本文XXXXXXXXXXXX

Header
Warning card title

カード本文XXXXXXXXXXXX

Header
Info card title

カード本文XXXXXXXXXXXX

Header
Light card title

カード本文XXXXXXXXXXXX

Header
Dark card title

カード本文XXXXXXXXXXXX

  <div class="card text-dark">border-primary mb-3" style="max-width: 18rem">
    <div class="card-header">Header</div>
    <div class="card-body text-primary">
      <h5 class="card-title">Primary card title</h5>
      <p class="card-text">カード本文XXXXXXXXXXXX</p>
    </div>
  </div>
  <div class="card border-secondary mb-3" style="max-width: 18rem">
    <div class="card-header">Header</div>
    <div class="card-body text-secondary">
      <h5 class="card-title">Secondary card title</h5>
      <p class="card-text">カード本文XXXXXXXXXXXX</p>
    </div>
  </div>
  <div class="card border-success mb-3" style="max-width: 18rem">
    <div class="card-header">Header</div>
    <div class="card-body text-success">
      <h5 class="card-title">Success card title</h5>
      <p class="card-text">カード本文XXXXXXXXXXXX</p>
    </div>
  </div>
  <div class="card border-danger mb-3" style="max-width: 18rem">
    <div class="card-header">Header</div>
    <div class="card-body text-danger">
      <h5 class="card-title">Danger card title</h5>
      <p class="card-text">カード本文XXXXXXXXXXXX</p>
    </div>
  </div>
  <div class="card border-warning mb-3" style="max-width: 18rem">
    <div class="card-header">Header</div>
    <div class="card-body">
      <h5 class="card-title">Warning card title</h5>
      <p class="card-text">カード本文XXXXXXXXXXXX</p>
    </div>
  </div>
  <div class="card border-info mb-3" style="max-width: 18rem">
    <div class="card-header">Header</div>
    <div class="card-body">
      <h5 class="card-title">Info card title</h5>
      <p class="card-text">カード本文XXXXXXXXXXXX</p>
    </div>
  </div>
  <div class="card border-light mb-3" style="max-width: 18rem">
    <div class="card-header">Header</div>
    <div class="card-body">
      <h5 class="card-title">Light card title</h5>
      <p class="card-text">カード本文XXXXXXXXXXXX</p>
    </div>
  </div>
  <div class="card border-dark mb-3" style="max-width: 18rem">
    <div class="card-header">Header</div>
    <div class="card-body text-dark">
      <h5 class="card-title">Dark card title</h5>
      <p class="card-text">カード本文XXXXXXXXXXXX</p>
    </div>
  </div>

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


  <div class="text-center">
    <p><a href="#" class="text-dark">text-primary">text-dark">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


  <div class="text-center">
    <p><a href="#" class="text-dark">bg-primary text-white d-block py-2">text-dark">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>

背景にグラデーション:bg-gradient


.bg-primary.bg-gradient
.bg-secondary.bg-gradient
.bg-success.bg-gradient
.bg-danger.bg-gradient
.bg-warning.bg-gradient
.bg-info.bg-gradient
.bg-light.bg-gradient
.bg-dark.bg-gradient
  <div class="p-3 mb-2 bg-primary text-dark">bg-gradient text-white">.bg-primary.text-dark">bg-gradient</div>
  <div class="p-3 mb-2 bg-secondary text-dark">bg-gradient text-white">.bg-secondary.text-dark">bg-gradient</div>
  <div class="p-3 mb-2 bg-success text-dark">bg-gradient text-white">.bg-success.text-dark">bg-gradient</div>
  <div class="p-3 mb-2 bg-danger text-dark">bg-gradient text-white">.bg-danger.text-dark">bg-gradient</div>
  <div class="p-3 mb-2 bg-warning text-dark">bg-gradient text-dark">.bg-warning.text-dark">bg-gradient</div>
  <div class="p-3 mb-2 bg-info text-dark">bg-gradient text-dark">.bg-info.text-dark">bg-gradient</div>
  <div class="p-3 mb-2 bg-light text-dark">bg-gradient text-dark">.bg-light.text-dark">bg-gradient</div>
  <div class="p-3 mb-2 bg-dark text-dark">bg-gradient text-white">.bg-dark.text-dark">bg-gradient</div>

バッジ基本的な使用例:badge


primary NEW

secondary 11

success 111

danger 1111

warning 0

info99

light 999

dark 9999

  <!-- バッチは、親要素のサイズに一致するように相対的なフォントサイズ em を使用 -->
  <p>primary <span class="badge bg-primary">NEW</span></p>
  <p>secondary <span class="badge bg-secondary">11</span></p>
  <p>success <span class="badge bg-success">111</span></p>
  <p>danger <span class="badge bg-danger">1111</span></p>
  <p>warning <span class="badge bg-warning">0</span></p>
  <p>info<span class="badge bg-info">99</span></p>
  <p>light <span class="badge bg-light text-dark">999</span></p>
  <p>dark <span class="badge bg-dark">9999</span></p>

ピル型のバッジを作成する:badge-pill


Primary Secondary Success Danger Warning Info Light Dark
  <!-- ビル型は、丸みを帯びた形状のデザインのこと -->
  <span class="badge rounded-pill bg-primary">Primary</span>
  <span class="badge rounded-pill bg-secondary">Secondary</span>
  <span class="badge rounded-pill bg-success">Success</span>
  <span class="badge rounded-pill bg-danger">Danger</span>
  <span class="badge rounded-pill bg-warning">Warning</span>
  <span class="badge rounded-pill bg-info">Info</span>
  <span class="badge rounded-pill bg-light text-dark">Light</span>
  <span class="badge rounded-pill bg-dark">Dark</span>

バッジによるカウンター表示:button


  <!-- buttonにspanでカウンターを設定する、ボタンをクリックすると動作する -->
  <!-- spanにbadgeを設定し、badgeの色も設定する -->
  <button type="button" class="btn btn-primary">
    button <span class="badge bg-light text-dark">4</span>
  </button>

スクリーンリーダー視覚支援 非表示テキスト:visually-hidden


  <!-- text-dark">visually-hiddenは非表示で、スクリーンリーダのみ読み上げます -->
  <button type="button" class="btn btn-primary">
    未読メッセージ <span class="badge bg-light text-dark">9</span>
    <span class="text-dark">visually-hidden">未読メッセージ</span>
  </button>