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

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

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="poscietydropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Tombol Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="poscietydropdown">
    <li><a href="#">Dropdown 1</a></li>
    <li><a href="#">Dropdown 2</a></li>
    <li><a href="#">Dropdown 3</a></li>
  </ul>
</div>

Simpan dan lihat hasilnya !

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:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="poscietytomboldropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Tombol Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="poscietytomboldropdown">
    <a class="dropdown-item" href="#">Dropdown 1</a>
    <a class="dropdown-item" href="#">Dropdown 2</a>
    <a class="dropdown-item" href="#">Dropdown 3</a>
  </div>
</div>

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.


Jangan Lupa Share !!!

92
14 shares, 92 points

Apa Reaksimu ?

Bingung Bingung
2
Bingung
Kesal Kesal
10
Kesal
OMG OMG
1
OMG
Takut Takut
10
Takut
Keren Keren
8
Keren
Sedih Sedih
3
Sedih
Posciety Tech

Pro

Official Channel Posciety.Com yang menyuguhkan informasi dan updates seputar dunia teknologi.

0 Komentar

Pilih Format
Artikel
Default, Membuat Artikel/Cerita
List
Listicle, Misalnya: 3 Hal yang Wajib Dilakukan Saat...
Kuis Kepribadian
Membuat kuis Tentang Kepribadian
Poll
Vote untuk Membuat Keputusan atau Mencari Saran
Meme
Membuat Meme dari Gambar Normal yang Kamu Miliki