Barva pozadí

Barvy vložíme do prvního řádku příkazu do class za bg- :

<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">

Tady je příklad tmavé karty, které jsme ve třídě nastavili barvu textu na bílou:

<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Hlavička</div>
  <div class="card-body">
    <h5 class="card-title">Titulek</h5>
    <p class="card-text">Text karty, které je nastaveno tmavé pozadí.</p>
  </div>
</div>

Barva ohraničení

Barvu můžeme nastavit i ohraničení. Barvu opět nastavujeme v třídě, kdy do class vepíšeme border- a za pomlčku barvu.

<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Hlavička</div>
  <div class="card-body">
    <h5 class="card-title">Titulek</h5>
    <p class="card-text">Text karty, která má červené ohraničení.</p>
  </div>
</div>

Můžeme ohraničit i hlavičku a obarvit text v tělu:

<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header border-danger">Hlavička</div>
  <div class="card-body text-success">
    <h5 class="card-title">Titulek</h5>
    <p class="card-text">Text karty, která má červené ohraničení, které zahrnuje i hlavičku.</p>
  </div>
</div>

Kombinace

Barvy částí můžeme různě kombinovat. Můžeme obarvit ohraničení a zároveň změnit barvu pozadí hlavičky:

<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header border-danger bg-secondary">Hlavička</div>
  <div class="card-body">
    <h5 class="card-title">Titulek</h5>
    <p class="card-text">Text karty, která má červené ohraničení a hlavička je obarvena na šedo.</p>
  </div>
</div>