Bootstrap validation error causing form alignment issues

Question

In this simple example, when I have a validation error on the First Name input box on the left side of the form, the E-Mail form element gets pushed down the page.

When I have the same error on the right side of the form though, this behavior does not happen.

I don't see any difference in the code. Here are some screen shots. I was unable to get this to work in jsfiddle or codepen, so here is the link to the test page and I've also pasted my html below:

https://www.blastyourresume.com/testing/formalignment/test.cfm

To reproduce the error on that page, type something in the firstname field, then delete it. If you repeat this process on the right side, you don't get the same behavior.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container" align="center">
    <form name="frmSignup" id="frmSignup" method="post">
        <div class="col-sm-6 col-xs-12 col-md-6">
            <div class="form-group" align="left">
                <label>First Name</label>
                <input type="text" placeholder="First Name" id="firstname" name="firstname" maxlength="50" class="form-control">
            </div>
        </div>
        <div class="col-sm-6 col-xs-12 col-md-6">
            <div class="form-group" align="left">
                <label>Last Name</label>
                <input type="text" placeholder="Last Name" id="lastname" name="lastname" maxlength="50" class="form-control">
            </div>
        </div>
        <div class="col-sm-6 col-xs-12 col-md-6">
            <div class="form-group" align="left">
                <label>E-Mail Address</label>
                <input type="text" placeholder="E-Mail" id="email" name="email" maxlength="100" class="form-control">
            </div>
        </div>
        <div class="col-sm-6 col-xs-12 col-md-6">
            <div class="form-group" align="left">
                <label>Confirm E-Mail Address</label>
                <input type="text" placeholder="Confirm E-Mail" id="confirmemail" name="confirmemail" maxlength="100" class="form-control">
            </div>
        </div>
        <div class="col-sm-12 col-xs-12 col-md-12">
            <button type="submit" name="btnSubmit" class="btn btn-primary" id="btnSubmit">&nbsp;&nbsp;Submit&nbsp;&nbsp;</button>
        </div>
    </form>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

1. Flex approach

   add display:flex to your parent container. Display flex will make your columns equal height.

   #frmSignup {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -ms-flex-wrap: wrap;
       flex-wrap: wrap;
   }
   

2. Absolute positioning of error messages.

   .form-group {
       position: relative;
   }
   
   .errormessageclass {
       position: absolute;
       top: 100%;
       left: 0;
       width: 100%;
   }