Make Bootstrap form inline and better layed out - html

Question

I am quite new to bootstrap, I have build the following form, but I want to know if someone can please assist me and help me make this form more inline as I think from a layout perspective there is a better way out there, but I really do not know how to achieve it, I will appreciate all the help.
Essentially help me make my form more aesthetically pleasing.
HTML:
<!-- Form Name -->
<legend>Order Form</legend>
<form class="form-horizontal form-shadow">
<fieldset>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="email">E-mail</label>
<div class="col-md-4">
<input id="email" name="email" type="text" placeholder="Enter E-mail" class="form-control input-md" required="">
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="tile">Select Title</label>
<div class="col-md-4">
<select id="tile" name="tile" class="form-control">
<option value="Miss">Miss</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Dr">Dr</option>
<option value="Rev">Rev</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="name">Name</label>
<div class="col-md-4">
<input id="name" name="name" type="text" placeholder="Enter Name" class="form-control input-md" required="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="surname">Surname</label>
<div class="col-md-4">
<input id="surname" name="surname" type="text" placeholder="Enter Surname" class="form-control input-md" required="">
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="address">Address</label>
<div class="col-md-4">
<textarea class="form-control" id="address" name="address" placeholder="Enter Address"></textarea>
</div>
</div>
<!-- Prepended text-->
<div class="form-group">
<label class="col-md-4 control-label" for="cell"></label>
<div class="col-md-4">
<div class="input-group">
<span class="input-group-addon">Cell</span>
<input id="cell" name="cell" class="form-control" placeholder="Enter Cellphone" type="text" required="">
</div>
</div>
</div>
<!-- Prepended text-->
<div class="form-group">
<label class="col-md-4 control-label" for="fax"></label>
<div class="col-md-4">
<div class="input-group">
<span class="input-group-addon">Fax</span>
<input id="fax" name="fax" class="form-control" placeholder="Enter Fax" type="text" required="">
</div>
</div>
</div>
This is what it looks like right now:
This is the effect that I would like:

Answer 1

sourround the form with
for the inputs i think you could use the col-md-6 or 8
also, you can apply multiple col types
for the radio options try something like this
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>.
and always, if you don't like the background color, you could change it in your own CSS file, you even could use the same class for bootstrap and your css (bootstrap is just that, a css)
also, the classes PULL-RIGHT and PULL-LEFT can help you
hope this can help you!