belajar bootstrap4, tutorial Bootstrap 4

Pengaturan Warna Standard di Bootstrap 4

Bootstrap 4 memiliki warna standard yang siap anda gunakan baik untuk background maupun untuk warna text. Dengan cara mengingat nama class untuk warna, Anda tidak lagi perlu untuk mengingat kode hex untuk warna yang bersangkutan.

Cara mengatur warna text di Bootstrap 4

Untuk mendefinisikan warna text, cukup dengan menggunakan class text-warnatext contohnya seperti text-blue

Nama class dan hasil yang didapat untuk mengatur warna text adalag sebagai berikut:

<div class="col-sm-12 text-mutted">.text-mutted</div>
<div class="col-sm-12 text-primary">.text-primary</div>
<div class="col-sm-12 text-danger">.text-danger</div>
<div class="col-sm-12 text-info">.text-info</div>
<div class="col-sm-12 text-success">.text-success</div>
<div class="col-sm-12 text-warning">.text-warning</div>
<div class="col-sm-12 text-secondary">.text-secondary</div>

Hasilnya adalah:


Nama class untuk warna text adalah sebagai berikut:
.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark dan .text-light

Cara mengatur warna Background di Bootstrap 4

Untuk mengatur warna background, gunakan class .bg-warna sebagai berikut:

<div class="col-sm-12 bg-primary text-white">.bg-primary .text-white</div>
<div class="col-sm-12 bg-success text-white">.bg-success .text-white</div>
<div class="col-sm-12 bg-info text-white">.bg-info .text-white</div>
<div class="col-sm-12 bg-warning text-white">.bg-warning .text-white</div>
<div class="col-sm-12 bg-danger text-white">.bg-danger .text-white</div>
<div class="col-sm-12 bg-secondary text-white">.bg-secondary .text-white</div>
<div class="col-sm-12 bg-dark text-white">.bg-dark .text-white</div>

Hasilnya adalah:

.bg-primary .text-white
.bg-success .text-white
.bg-info .text-white
.bg-warning .text-white
.bg-danger .text-white
.bg-secondary .text-white
.bg-dark .text-white

One thought on “Pengaturan Warna Standard di Bootstrap 4”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>