Contoh Form Horizontal Bootstrap 4

Contoh source code form HTML dalam bentuk horizontal (label dan input dalam satu baris) menggunakan Bootstrap 4.

<div class="form-group row">
    <label for="nama" class="col-sm-2 col-form-label">Nama Lengkap</label>
    <div class="col-sm-4">
        <input name="nama" id="nama" class="form-control" type="text">
    </div>
</div>

Di bagian form-group ditambahkan class row, dan di bagian label ditambahkan class col-sm-2 dan col-form-label agar label nya sejajar dengan input.

Sementara untuk input tidak bisa langsung ditambahkan class col nya, tapi harus dimasukkan kedalam div.

Contoh source ini menampilkan form nya setengah halaman saja, karena total kolomnya ada 6 (col-sm-2 + col-sm-4). Jika ingin lebih lebar bisa disesuaikan saja dengan maksimal total sesuai aturan Bootstrap yaitu 12.

Leave a Reply