Twitter Bootstrap Form Field Format - html

Question

Labels are not in aligned with the fields.I want to make sure that labels be wrapped elegantly if exceeds the column width. Here is complete jsfiddle
HTML
<div class="row row-padded">
<strong>Question: </strong><p>Are you 18 years old?</p>
<strong>Answer:</strong>
<div class="radio-inline">
<label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">Yes</label>
</div>
<div class="radio-inline">
<label><input type="radio" name="optionsRadios1" id="optionsRadios2" value="option1">No</label>
</div>
<div class="row">
<div class="col-md-8 childFields">
<p class="">Give full details here: </p>
<div class="row">
<div class="col-md-6 colChildFields">
<label>Nature of Condition</label>
<input type="text" name="city"/>
</div>
<div class="col-md-6 colChildFields">
<label>Dates and Duration</label>
<input type="text" name="city"/>
</div>
<div class="col-md-6 colChildFields">
<label>Name Of Doctor</label>
<input type="text" name="city"/>
</div>
<div class="col-md-6 colChildFields">
<label>Name of Hospital</label>
<input type="text" name="city"/>
</div>
<div class="col-md-6 colChildFields">
<label>Address of Hospital</label>
<input type="text" name="city"/>
</div>
</div>
</div>
</div>
</div>

Answer 1

I'm not sure I understood you right, but if that's what you're looking for, you should just add this to the CSS:
.col-md-6 label {
width: 150px;
}

Answer 2

If you want to do an horizontal form, you'll have to use a container div with class form-group and add a class control-label to the label, form-control to the input, with a structure like this :
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail1" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
Replace (in classes) -lg- by -xs- and it will be responsive and self managed if the label is longer.
See example with my jsFiddle