Can a select element be inserted inside a horizontal form in Bootstrap?
I am trying to add a form with a select element inside a form group.
Check out the code on Bootply.
Note: Copy the code below as Bootply sometimes removes certain form tags.
The issue is that the elements are not aligned properly. The Country and Language selects are misaligned, causing issues with the code layout.
Here is the code:
<div class="container-fluid">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-4 control-label" for="fname">First name:</label>
<div class="col-sm-8">
<input class="form-control" name="fname" id="fname" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="lname">Last name:</label>
<div class="col-sm-8">
<input class="form-control" name="lname" id="lname" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="country">Country:</label>
<div class="col-sm-8">
<form>
<select name="country" id="country" class="form-control">
<option value="US">US</option>
<option value="UK">UK</option>
<option value="CA">CA</option>
</select>
</form>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="language">Language:</label>
<div class="col-sm-8">
<form>
<select name="language" id="language" class="form-control">
<option value="en-US">en-US</option>
<option value="en-UK">en-UK</option>
<option value="fr">FR</option>
</select>
</form>
</div>
</div>
</form>
</div>