CSS: Form control alignment using bootstrap 3 - html

Question

This might be something simple that I am missing but I cant get though this. I am using bootstrap 3 in my application. In my form I have some controls like dropdowns, textbox, labels etc. See example as below:
<div class="modal-body">
<form role="form" name="form" class="form-body">
<div class="form-group">
//form label here
<div class="m-grid-col-sm-5">
//form element here
</div>
</div>
</form>
<div>
Above is just a example. The issue is when I run my app, I can see is the label is always above the control. What I want is the label on the left and the form control (dropdown,textbox etc) on the right.
You can see I created a sample jsfiddle at:
https://jsfiddle.net/aman1981/xprh2tno/8/
Please ignore the modal class as the issue is not I am having is not at the modal but other forms within my app as well.
I have tried adjusting and using different class but looks like its not adjusting well.

Answer 1

You need to refer the Horizontal Form section in the documentation here: http://bootstrapdocs.com/v3.0.3/docs/css/#forms
HTML:
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
Demo: https://jsfiddle.net/xprh2tno/12/

Answer 2

You Can try this Code here
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="name" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-xs-2 control-label">Email</label>
<div class="col-xs-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="sex" class="col-xs-2 control-label">Sex</label>
<div class="col-xs-10">
<select name="sex" class="auto-width setup-inline form-control input-medium" required>
<option value="">---Please select---</option>
<option value="m">Male</option>
<option value="f">Female</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10 text-right">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>