Hallo sobat program, bertemu kembali dengan saya Rizal dan masih tetap sama diwebsite dumetschool. Disini kita akan masih membahas seputar bootstrap 4 yaitu tentang Cara Membuat Description List dengan Bootstrap 4.
Pada dasarnya list dalam HTML ada 3 yaitu ordered list, unordered list, dan yang akan kita coba sekarang yaitu description list. Description list atau daftar penjelasan dalam html tag <dl> digunakan untuk mereferensikan daftar istilah berikut penjelasannya. Dan dalam penggunaannya <dl> digunakan bersamaan dengan tag <dt> (menunjukan istilah) dan <dd> (penjelasan dari istilah tsb).
Cara Membuat Description List dengan Bootstrap 4.
Oke saya rasa penjelasan secara teori diatas sudah cukup jelas, dan selanjutnya kita akan mencoba membuat description list dengan bootstrap 4. Langkah pertama siapkan sebuah folder lalu jalankan/run text-editornya kemudian buka website bootstrapnya lalu ikutilah step dibawah ini untuk menggunakan starter template default dari bootstrap 4 dengan menggunakan CDN bootstrap 4. Step by step seperti dibawah ini :
Jika sudah, pada bagian <h1>hello world</h1> dihapus saja dan tambahkan script description list seperti pada gambar dibawah ini :
Jika sudah ditambahkan, silahkan dijalankan. Dan hasilnyapun masih default dari bootstrap itu sendiri. Dan disini kita akan mengcostum defaultnya menjadi seperti yang kita inginkan dengan menambahkan css sendiri seperti pada gambar dibawah ini :
Cara Membuat Description List dengan Bootstrap 4.
Jika sudah ditambahkan css nya, langkah selanjutnya teman-teman boleh langsung dijalankan kembali dan hasilnya akan menjadi seperti dibawah ini :
Dan untuk hasil mobile atau smartphone akan menjadi seperti pada gambar dibawah ini :
Bagaimana ? mudah dan bagus kan teman-teman, jadi seperti itulah contoh sederhana dipembahasan kali ini tentang Cara Membuat Description List dengan Bootstrap 4.
Semoga dapat bermanfaat buat teman-teman dan sampai bertemu dipembahasan selanjutnya.
Terimakasih