In order to meet the requirement, the label must be positioned above the input element, and the group consisting of each label and input element should be displayed inline with one another.
I have managed to achieve this using the following code snippet, especially when the label text is long. However, when the text of the label is short, the input element aligns differently.
I suspect that I may be implementing this incorrectly. Could someone please suggest a better way to handle this using bootstrap?
Thank you in advance.
Code -
<form class="form" id="taxCalcDetail">
<div class="form-inline">
<div class="form-group col-lg-3 pb-3">
<label class="small pb-1">A1</label>
<input type="text" name="t1" class="form-control" id="t1">
</div>
<div class="form-group col-lg-3 pb-3">
<label class="small pb-1">A2</label>
<input type="text" name="t2" class="form-control" id="t2">
</div>
<div class="form-group col-lg-3 pb-3">
<label class="small pb-1">A3</label>
<input type="text" name="t3" class="form-control" id="t3">
</div>
</div>
</form>