Cara menggunakan dropdown bootstrap 5

Diterbitkan 19 Nov 2018 Diperbarui 10 Jun 2020

Untuk membuat dropdown select pada Bootstrap tidak sulit, cukup salin kode berikut dan tempelkan di situs Bootstrap di mana ingin menampilkan dropdown select…

Pada beberapa formulir HTML Bootstrap biasanya memerlukan dropdown select, apa itu dropdown select ? Dropdown Select adalah daftar pilihan yang disediakan berupa dropdown, hanya dapat dipilih satu dari beberapa pilihan yang ada. Contohnya seperti ini:

Kita contohkan dengan pemilihan jurusan di perkuliahan, para mahasiswa dapat memilih 1 jurusan dari daftar jurusan yang telah disediakan. Umumnya dropdown select diberi kosong atau strip pada urutan pertamanya (default) artinya mahasiswa belum memilih, ketika di klik akan muncul pilihan lain seperti yang terlihat pada gambar.

ads by posciety

Untuk membuat dropdown select pada Bootstrap tidak sulit, cukup salin kode berikut dan tempelkan di situs Bootstrap di mana ingin menampilkan dropdown select:

<h2>Dropdown Select Bootstrap - Posciety.Com</h2>
<form>
  <div class="form-group">
    <label for="sel1">Pilih Jurusan:</label>
    <select class="form-control" id="pilihJurusan">
    	<option>-</option>
      <option>Sistem Informasi</option>
      <option>Teknik Informatika</option>
      <option>Teknik Sipil</option>
    </select>
  </div>
</form>

Tambahkan pilihan lain dengan menambahkan <option> di bawah, maka pilihan tersebut akan tampil juga di halaman depan dan berjajar ke bawah.

Selamat mencoba !

Dalam membuat aplikasi berbasis web, dropdown menu adalah fasilitas yang harus ada untuk memudahkan pemakai aplikasi menggunakan aplikasi. Dengan menggunakan framework Bootstrap, kita dapat membuat dropdown menu dengan mudah.

Source code utama membuat membuat dropdown menu dapat dilihat pada contoh berikut ini:
            <li>
               <a data-toggle=”dropdown” data-target=”#” href=”#”>
                   Paket website <span class=”caret”></span>
               </a>
               <ul class=”dropdown-menu”>
                   <li><a href=”#”>Basic</a></li>
                   <li><a href=”#”>Bisnis</a></li>
                   <li><a href=”#”>Corporate</a></li>
               </ul>
           </li>

Tampilan terkait source code di atas adalah:

Kemudian untuk source code lengkapnya adalah:
<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”utf-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
    <meta name=”viewport” content=”width=device-width, initial-scale=1″>
    <title>Dropdown mudah</title>

</head>
<body>

       <div class=”container”>
       <ul class=”nav nav-pills”>
           <li class=”active”><a href=”#”>Home</a></li>
           <li><a href=”#”>About</a></li>
           <li>
               <a data-toggle=”dropdown” data-target=”#” href=”#”>
                   Paket website <span class=”caret”></span>
               </a>
               <ul class=”dropdown-menu”>
                   <li><a href=”#”>Basic</a></li>
                   <li><a href=”#”>Bisnis</a></li>
                   <li><a href=”#”>Corporate</a></li>
               </ul>
           </li>
           <li>
               <a data-toggle=”dropdown” data-target=”#” href=”#”>
                   Paket Aplikasi <span class=”caret”></span>
               </a>
               <ul class=”dropdown-menu”>
                   <li><a href=”#”>ERP</a></li>
                   <li><a href=”#”>HRD</a></li>
                   <li><a href=”#”>CRM</a></li>
               </ul>
           </li>
       </ul>
   </div> <!– /container –>