#Bootstrap 4

Tutorial Bootstrap 4 #21 : Input Group Bootstrap 4

Input Group Bootstrap 4 – Selamat datang kembali di seri tutorial bootstrap 4 dari malasngoding.com. Pada tutorial ini kita masih akan belajar tentang cara pembuatan form menggunakan bootstrap.

Jika pada tutorial sebelumnya kita telah belajar tentang cara membuat form (komponen form) menggunakan bootstrap 4, maka pembahasan kali ini akan lebih spesifik, kita akan belajar tentang komponen input group.

Input Group Bootstrap 4

Komponen Input Group memungkinkan kita untuk menggabungkan form input, select option, textarea dan lain-lain dengan text, tombol atau button group.

Intinya dengan komponen input group ini kita bisa membuat form yang digabung dengan text, tombol dan lain-lain secara mudah.

Input Group Sederhana

Berikut contoh input group pada form input dan textarea sederhana.

</div>

</div>

<span class="input-group-text" id="basic-addon2">@malasngoding.com</span>

</div>

<label for="basic-url">URL Channel Youtube</label>

<span class="input-group-text" id="basic-addon3">https://youtube.com/c/</span>

</div>

</div>

</div>

</div>

<span class="input-group-text">Dengan textarea</span>

</div>

</div>

dan hasilnya seperti berikut.

form input group bootstrap 4

Seperti yang terlihat pada gambar contoh input group di atas, pada contoh di atas, kita bisa membuat penggabungan form input dengan text.

Tidak hanya dengan text, kita juga bisa menggabungkan form input dengan tombol atau tombol dropdown yang juga sudah kita pelajari pada tutorial bootstrap 4 sebelumnya.

Ukuran Input Group

Seperti pada form biasa yang sudah kita pelajari pada tutorial sebelumnya, bootstrap juga menyediakan class untuk mengatur ukuran dari form yang ingin kita buat.

Perhatikan contoh berikut.

<span class="input-group-text" id="inputGroup-sizing-sm">Input Group Kecil</span>

</div>

</div>

<span class="input-group-text" id="inputGroup-sizing-default">Input Group Sedang (default)</span>

</div>

</div>

<span class="input-group-text" id="inputGroup-sizing-lg">Input Group Besar</span>

</div>

</div>

Untuk membuat form input group yang berukuran kecil, kita bisa gunakan class .input-group-sm, untuk membuat form input group berukuran besar kita bisa menggunakan class .input-group-lg.

ukuran input group bootstrap 4

Input Group Checkbox dan Radio Button

Input Group juga bisa diterapkan pada form checkbox dan radio button. perhatikan contoh penerapan form input group pada checkbox dan radio button berikut.

</div>

</div>

</div>

</div>

Dan hasilnya seperti berikut.

form input group checkbox dan radio button

Multiple Input Group

Kita juga bisa membuat form input ganda, atau addon ganda, perhatikan contoh berikut.

<span class="input-group-text">Nama Depan & Belakang</span>

</div>

</div>

<br/>

</div>

</div>

</div>

Ada contoh form inputan ganda yang kita buat di atas, ada juga contoh addon yang ganda.

multiple form input group

Oke sekian dulu tutorial tentang form input group pada bootstrap 4. kita bisa menggabungkan form inputan dengan text, tombol dan lain-lain.

Jika teman-teman ingin membaca panduan lengkap tentang input group pada bootstrap ini teman-teman bisa baca di

https://getbootstrap.com/docs/4.3/components/input-group

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.