Pada postingan sebelumnya kita telah membahas cara membuat background menggunakan media baik itu video, audio, ataupun gambar pada HTML, kali ini kita akan lanjutkan membahas memberikan latar belakang warna (background color) tapi pada framework Bootstrap. Jika belum menggunakan Bootstrap, sebaiknya install sekarang dan mulailah membangun web menggunakan Bootstrap, ini sangat membantu bagi semua kalangan.
Seperti yang pernah dijelaskan sebelumnya di postingan tentang memberikan warna pada teks Bootstrap, warna default yang disediakan ole Bootstrap adalah:
- Warna gelap / buram, ini belum tersedia untuk background
- Warna merah, bg-danger
- Warna biru, bg-primary
- Warna kuning / orange (browser), bg-warning
- Warna hijau, bg-success
- Warna biru muda, bg-info
bg- di atas adalah nama-nama class yang dapat kamu gunakan pada suatu tag HTML agar memberikan warna latar (sesuai warna yang dipilih) pada bagian tersebut, contohnya seperti ini:
<h2>Warna Background Bootstrap - Posciety</h2> <p>Baris ini adalah tulisan tanpa warna latar</p> <p class="bg-danger">Ini adalah tulisan dengan warna latar belakang danger</p> <p class="bg-primary">Ini adalah tulisan dengan warna latar belakang primary</p> <p class="bg-warning">Ini adalah tulisan dengan warna latar belakang warning</p> <p class="bg-success">Ini adalah tulisan dengan warna latar belakang success</p> <p class="bg-info">Ini adalah tulisan dengan warna latar belakang info</p>
Simpan dan lihat hasilnya !
Baca Juga:
Hanya info tambahan, seperti yang terlihat pada gambar di atas terdapat background berwarna untuk setiap tulisan (p) tapi ia akan memberikan warna satu baris penuh. Ini adalah default dari tag p pada HTML, silahkan berikan gaya tambahan untuk tag p tersebut sesuai style yang diinginkan.
Pastinya ini responsive, ketika memberikan nama-nama class ini maka secara otomatis akan berfungsi juga untuk semua perangkat yang digunakan.
Selamat mencoba !