Warna & latar belakang

Atur warna latar belakang dengan warna latar depan yang kontras.

Di halaman ini

Ringkasan

Ditambahkan di v5.2.0

Pembantu warna dan latar belakang menggabungkan kekuatan .text-*utilitas dan .bg-*utilitas kami dalam satu kelas. Menggunakan fungsi Sass kami color-contrast(), kami secara otomatis menentukan kontras coloruntuk background-color.

Perhatian! Saat ini tidak ada dukungan untuk fungsi CSS-asli color-contrast, jadi kami menggunakan fungsi kami sendiri melalui Sass. Ini berarti bahwa menyesuaikan warna tema kami melalui variabel CSS dapat menyebabkan masalah kontras warna dengan utilitas ini.

Primer dengan warna kontras

Sekunder dengan warna kontras

Sukses dengan warna yang kontras

Bahaya dengan warna kontras

Peringatan dengan warna kontras

Info dengan warna kontras

Terang dengan warna kontras

Gelap dengan warna kontras

html

<div class="text-bg-primary p-3">Primary with contrasting color</div>
<div class="text-bg-secondary p-3">Secondary with contrasting color</div>
<div class="text-bg-success p-3">Success with contrasting color</div>
<div class="text-bg-danger p-3">Danger with contrasting color</div>
<div class="text-bg-warning p-3">Warning with contrasting color</div>
<div class="text-bg-info p-3">Info with contrasting color</div>
<div class="text-bg-light p-3">Light with contrasting color</div>
<div class="text-bg-dark p-3">Dark with contrasting color</div>

Dengan komponen

Gunakan mereka sebagai pengganti gabungan .text-*dan .bg-*kelas, seperti pada lencana :

Utama Info

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-info">Info</span>

Atau pada kartu :

Tajuk

Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.

Tajuk

Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.

html

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>