Just when I felt confident in my understanding of bootstrap, it seems to be giving me trouble :(
I am aiming to create a layout with 2 columns, each containing a question followed by a small text box for entering a number.
Here is an example of the layout I have in mind
__ indicates a small text box below
_____________________________________________________________________________________________
Group 1 | Group 2
1. Are you Prone to Infection, colds, coughs, or flu? ___ | 1. What is your weight ____ | 2. adfafafa
2. Do you have inflammation, Heat spots ? __ |
My struggle lies in achieving the desired horizontal alignment as they are either wrapping incorrectly or too far apart/ close to each other.
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="border:1px solid black;">
<div class="form-inline">
<label>1. Are you Prone to Infection, colds, coughs, or flu? </label>
<input id="group1A" [(ngModel)]="group1A" name="group1A" style="width: 5px;" type="text" class="form-control" placeholder="">
<br>
<label for="group1B">Do you have inflammation, Heat spots ? </label>
<input id="group1B" [(ngModel)]="group1B" name="group1B" type="text" class="form-control" placeholder="">
<label for="group1C">Do you have specific pain (printed form - list on Back)</label>
<input id="group1C" [(ngModel)]="group1C" name="group1C" type="text" class="form-control" placeholder="">
<label for="group1D">Do you have swelling?</label>
<input id="group1D" [(ngModel)]="group1D" name="group1D" type="text" class="form-control" placeholder="">
<label for="group1E">Do you have pus, open sores, skin problems, mucus formation?</label>
<input id="group1E" [(ngModel)]="group1E" name="group1E" type="text" class="form-control" placeholder="">
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="border:1px solid black;">
<div class="form-inline">
......
</div>
</div>