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 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