In line view of forms in modal - bootstrap-modal

Question

I am using Bootstrap modal.
The following is my code.
<!-- Modal -->
<div class="modal fade" id="editModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>Edit Equifax Credit Score Data</h4>
</div>
<div class="modal-body form-horizontal">
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="equiFaxName"
placeholder="Name" readonly="readonly" />
</div>
</div>
<div class="form-group row">
<label for="startRangeModal" class="col-sm-2 col-form-label">Start
Range</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="startRangeModal"
placeholder="Start Range" />
</div>
</div>
<div class="form-group row">
<label for="endRangeModal" class="col-sm-2 col-form-label">End
Range</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="endRangeModal"
placeholder="End Range" />
</div>
</div>
<div class="form-group row required">
<label for="riskGradeModal" class="col-sm-2 col-form-label">Risk
Grade </label>
<div class="col-sm-10">
<input type="text" class="form-control" id="riskGradeModal"
placeholder="Risk Range" />
</div>
</div>
<div class="form-group row required">
<label for="agentRiskGradeModal" class="col-sm-2 col-form-label">Agent
Display Grade</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="agentRiskGradeModal"
placeholder="Agent Display Grade" />
</div>
</div>
<div class="form-group row required">
<label for="hitCode" class="col-sm-2 col-form-label"> Hit
Code</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="hitCodeModal"
placeholder="Hit Code" />
</div>
</div>
<div class="form-group row required">
<label for="hitCodeResponse" class="col-sm-2 col-form-label">
Hit Code</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="hitCodeResponseModal"
placeholder="Hit Code Response" />
</div>
</div>
<div class="form-group row required">
<label for="approvalTypeListModal" class="col-sm-2 col-form-label">Approval
Type</label> <select id="approvalTypeListModal" class="form-control">
</select>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary"
data-dismiss="modal">Cancel</button>
<button class="btn btn-success"
id="submitEditModalData">Save</button>
</div>
</div>
</div>
</div>
In the modal all the form inputs are inline horizontal but the select tag shows below the label and is not inline with the label.
Can someone help me in putting the select box in line and not below the label.

Answer 1

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="form-group row required">
<label for="approvalTypeListModal" class="col-md-2 col-sm-2 col-xs-2 col-form-label">Approval
Type
</label>
<div class="col-md-10 col-sm-10 col-xs-10">
<select id="approvalTypeListModal" class="form-control">
<option value="option1">Option1</option>
</select>
</div>
</div>
You forgot to put class col-md-* .
You can put it in select tag or can make a new div and give it to that class.
Hope this helps.