Currently, I am working on implementing a bootstrap 3 input group, but unfortunately, the outcome is not meeting my expectations. My goal is to create a select [input]-[input text]-[button] structure all in one line. However, in my scenario, the button has white space inside it, resulting in something like this: Input Group SS. Here is the code snippet I am working with:
<div class="card-block bg-white">
<div class="row">
<form action="<?php echo base_url(); ?>performance" method="post">
<div class="form-group">
<div class="input-group col-md-6 col-md-offset-4 col-sm-12 col-xs-12">
<span class="input-group-btn">
<select class="form-control input-sm" name="id_cabang" id="id_cabang">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</span>
<span class="input-group-btn">
<input id="bulan_kinerja" name="bulan_kinerja" type="text" class="form-control input-sm bln_picker" data-provide="datepicker" placeholder="Datepicker" value="<?php echo $bulan_kinerja; ?>"/>
</span>
<span class="input-group-btn">
<button type="submit" class="btn btn-primary btn-sm" id="kinerja_btn">Submit</button>
</span>
</div>
</div>
</form>
</div>
</div>I have explored various examples on Google, but in some cases, when the screen width decreases, it breaks into a new line.
My objective is to achieve a fully responsive and Bootstrap 3 compliant layout. I would appreciate any assistance. Thank you very much.