Bootstrap side by side fields alignment issue for missing labels

October 10, 2023

I am trying to create a simple bootstrap layout but having trouble aligning controls that do not have labels.

My issue is replicated in below fiddle. The controls (textbox and button) on third column do not have labels, therefore these controls are not aligning next to the Last name text box. I have tried using mt-2 class as well align-bottom but without any success. Can someone please help?

fiddle

The html is given below.

<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 below shows the alignment issue. The controls on the third column should aligned with Last name text boxes.

Thank you

>Solution :

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<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 d-flex align-items-end">
    <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 d-flex align-items-end">
    <input type="submit" value="Submit" class="btn btn-primary" />
  </div>

</div>