Mengenal Contextual Classes pada Bootstrap 4

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. Semoga bermanfaat

30 Agustus 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat