I am struggling to arrange a radio button with two text fields in a horizontal form using Bootstrap. Unfortunately, I can't embed the image for reference.
Despite my efforts in using Jade markup, I haven't been able to achieve the desired layout:
.col-sm-4
.form-group
label.control-label(for='time') Time Range
.form-inline
.form-group
input(type='radio', id="from", name='time', value='from', data-toggle='radio')
label(for="from") From
.form-group
input(type='text', name='first')
.form-group
input(type='text', name='last')
My current implementation causes everything to be on one line, covers up the "From" label entirely, and places the two text boxes side by side without any spacing. Is this issue something that can be resolved through CSS adjustments, or have I misunderstood how form layouts work in Bootstrap 3? Any guidance would be greatly appreciated.
EDIT: The resulting HTML code is as follows:
<div class="form-group">
<label for="time" class="control-label">Time Range</label>
<div class="form-inline">
<div class="form-group">
<input type="radio" id="from" name="time" value="from" data-toggle="radio">
<label for="from">From</label>
</div>
<div class="form-group">
<input type="text" name="first">
</div>
<div class="form-group">
<input type="text" name="last">
</div>
</div>
</div>