Contoh Input Group Dua Input Dengan Teks di Tengah Bootstrap 4

Di Bootstrap kita bisa menggunakan input group untuk menggabungkan input dengan elemen lain misal teks atau dengan input lagi.

Contoh tampilan dua input dengan teks di tengah

Contoh penggunaan input group pada Bootstrap 4, seperti pada gambar di atas.

<div class="input-group">
    <input name="tgl1" id="tgl1" class="form-control" type="text">
    <div class="input-group-prepend input-group-append">
        <div class="input-group-text">s/d</div>
    </div>
    <input name="tgl2" id="tgl2" class="form-control" type="text">
</div>

Contoh penggunaan yang lebih lengkap dengan form dan button.

<form action="/laporan/cetak" method="post" target="_blank">
    <div class="form-group row">
        <label for="tgl1" class="col-sm-2 col-form-label">Tanggal Transaksi</label>
        <div class="col-sm-4">
            <div class="input-group">
                <input name="tgl1" id="tgl1" class="form-control" type="text">
                <div class="input-group-prepend input-group-append">
                    <div class="input-group-text">s/d</div>
                </div>
                <input name="tgl2" id="tgl2" class="form-control" type="text">
            </div>
        </div>
        <div class="col-sm-2">
            <button type="submit" name="cetak" class="btn btn-outline-success"><i class="fas fa-print"></i> Cetak</button>
        </div>
    </div>
</form>

Sumber

Leave a Reply