I am struggling to design a basic bootstrap layout as I am facing challenges in aligning controls that lack labels.
The problem can be seen in the provided fiddle. The controls (textbox and button) in the third column are not aligned next to the Last name textbox. I have experimented with classes like mt-2 and align-bottom but haven't had any success. Can anyone offer assistance?
Below is the HTML snippet:
<div class="row">
<div class="col-xs-4 col-lg-4">
<label for="firstNameInput" class="control-label">First Name</label>
<input type="text" id="firstNameInput" class="form-control" />
</div>
<div class="col-xs-6 col-lg-5">
<label for="lastNameInput" class="control-label">Last Name</label>
<input type="text" id="lastNameInput" class="form-control" />
</div>
<div class="col-xs-2 col-lg-1 mt-5 align-baseline">
<input type="text" class="form-control" />
</div>
</div>
<div class="row">
<div class="col-xs-4 col-lg-4">
<label for="firstNameInput" class="control-label">First Name</label>
<input type="text" id="firstNameInput" class="form-control" />
</div>
<div class="col-xs-6 col-lg-5">
<label for="lastNameInput" class="control-label">Last Name</label>
<input type="text" id="lastNameInput" class="form-control" />
</div>
<div class="col-xs-2 col-lg-1 mb-0 align-baseline">
<input type="submit" value="Submit" class="btn btn-primary" />
</div>
</div>
The red line indicates the alignment discrepancy. The controls in the third column should align with the Last name text boxes.
https://i.sstatic.net/zbtj2.png
Appreciate your help