How do I place two selections side-by-side using Bootstrap?
I want to place two select options side by side in my form. I am using Bootstrap 3, but I am unable to place them with correct alignment.
Here is my HTML code:
<form role="form">
<div class="form-group">
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control"/>
<span class="input-group-addon"><span class="fa fa-calendar"></span></span>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control"/>
<span class="input-group-addon"><span class="fa fa-calendar"></span></span>
</div>
</div>
<div class="form-group">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="form-group">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-block te" >Prices & Availability</button>
</form>
+3
source to share
1 answer
Use this
jsfiddle http://jsfiddle.net/harshdand/e0fc1ucq/
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
</div>
+5
source to share