Penerapan Class Warna Pada Bootstrap 4

18/12/2017    Maykhel David    8689    Website

Pemilihan warna tema pada sebuah website menjadi hal yang sangat harus diperhatikan jika kita ingin membangun sebuah website yang terlihat bernilai dimata pengunjung. Sering kali pemilihan tema warna yang diterapkan pada sebuah website hanya mempedulikan kesesuaian warna tanpa memandang bagaimana cara para pengunjung membaca dan melihat website. Pada bootstrap versi 4  ini kita juga sudah diberikan banyak kemudahan tentang pemilihan warna yang ditambahkan di banding dari versi sebelumnya.

Berikut ini adalah contoh yang berguna untuk kalian semua dalam menggunakan contextual classes pada sebuah text.

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light">.text-light</p>
<p class="text-dark">.text-dark</p>

Selain pada teks, contextual classes juga bisa kita gunakan sebagai background pada sebuah elemen, contohnya seperti ini.

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

Selain menggunakan class text-* dan juga class .bg-* kita juga bisa gunakan contextual class pada badge dan juga table, berikut adalah contoh struktur jika kita ingin menerapkan pada sebuah table

<!—Pada Table Row -->
<tr class="table-active">...</tr>
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!— Pada table cell (`td` atau `th`) -->
<tr>
  <td class="table-active">...</td>
  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

Dan berikut ini adalah contoh dalam penggunaan contextual pada badges.

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

Baiklah teman-teman demikian artikel kali ini yang membahas tentang bagaimana cara penerapan contextual classes pada bootstrap 4, sampai jumpa pada artikel selanjutnya. Semoga bermanfaat

Tips dan Trik, Bootstrap