Cara menggunakan dropdown bootstrap 4

Hallo sahabat Dumetschool, dalam kesempatan ini saya akan membahas tentang Cara Sederhana Membuat Dropdown Hover Menggunakan Bootstrap 4. Sahabat tentu tidak asing lagi jika sudah menggunakan Bootstrap ya. Karena disini menggunakan Bootstrap tentu sangat dimanjakan dalam membuatnya. Kenapa bisa begitu tentu kita hanya tinggal mencari layout navbar pada kolom pencarian. Sahabat ketikkan saja navbar kemudian cari tampilan yang ada dropdownnya. Jadi saat kita pilih navbar dropdown kita harus melakukan klik terlebih dahulu untuk melihat submenu. Nah disini saya akan membuat berbeda dengan cara di hover menu dropdownnya. Oke langsung saja kita buat seperti langkah dibawah ini:

Pertama, sahabat silahkan membuat file HTML lalu ketikkan code berikut:

pada code diatas adalah struktur awal atau template dari bootstrap.

Langkah kedua yaitu tambahkan code dibawah ini untuk bagian navbar :

Jika sudah silahkan simpan terlebih dahulu. Untuk memberikan efek hover tambahkan style CSS berikut ini:

.dropdown:hover>.dropdown-menu{display: block}

OKe simpan kembali filenya, kemudian buka browser masing masing dan lihat hasilnya seperti tampilan dibawah ini:

Saya kira cukup dalam pembahasan kali ini Cara Membuat Dropdown Hover Menggunakan Bootstrap 4 , sampai jumpa dalam pembahasan lainnya dan selamat mencoba.

Walaupun sudah banyak contoh template Bootstrap yang dapat didownload melalui internet secara gratis, mungkin masih ada beberapa pengguna yang masih kebingungan ketika ingin mengkustomnya seperti menambah tombol dropdown. Di bawah ini kamu akan mengetahui bagaimana cara membuat dropdown button menggunakan Bootstrap.

Seiring berjalannya waktu, mulai bertambah banyak pengguna dan pengembang web yang menggunakan Bootstrap 4. Tapi, jika ditebak sampai saat ini penggunaan Bootstrap 3 juga belum berkurang banyak. Pilihlah di bawah ini versi Bootstrap yang sedang digunakan.

Dropdown Bootstrap 3

ads by posciety

Jika menggunakan Bootstrap 3, ketika ingin membuat tombol dropdown cukup gunakan struktur kode seperti ini:

  
    Tombol Dropdown
    
  
  

    
Dropdown 1
    
Dropdown 2
    
Dropdown 3
  

Simpan dan lihat hasilnya !

Baca Juga:

7 Cara Mudah Membuat Situs WordPress Mobile Friendly

4 Tren UX Design di Tahun 2021

12 Plugin WordPress Gratis & Terbaik 2021 yang Wajib Kamu Miliki

Cara Mengetahui Kata-Kunci yang Dipakai oleh Pengunjung pada Fitur…

Bootstrap 4

Pada Bootstrap 4 strukturnya sedikit dibuat lebih sederhana ketimbang Bootstrap 3, tapi secara keseluruhan fungsinya tidak jauh berbeda. Ketika ingin membuat tombol dropdown di Bootstrap 4 cukup gunakan struktur kode seperti ini:

  
    Tombol Dropdown
  
  

    Dropdown 1
    Dropdown 2
    Dropdown 3
  

Simpan dan lihat hasilnya !

Baik Bootstrap 3 maupun Bootstrap 4, kamu dapat menyesuaikan style dropdown button ini sesuai keperluan seperti mengganti warna tulisan / warna background (tombol), ukuran, mengganti font, dll.

Tips: Agar lebih cepat dalam memberikan warna pada tulisan ataupun warna background di Bootstrap, kamu dapat menggunakan class-class yang sudah disediakan oleh Bootstrap.

Tombol dropdown pada Bootstrap biasa digunakan untuk membuat sebuah tombol di area yang luas seperti isi postingan ataupun di area sempit seperti header, bahkan bisa dijadikan sebagai salah satu menu item pada header misalnya tombol register / login.