I have a simple form with error handling through jqBootstrapValidation. I set it up so that it is horizontal when the browser is wide enough. Here is how it looks: https://i.stack.imgur.com/GCK3r.png
However, when I enter a bad email, the form is not aligned anymore. https://i.stack.imgur.com/SYkcY.png
Here is the code I am using. I just can't get it to work.
<form class="form-inline">
<div class="form-group form-group-lg">
<div class="col-lg-6 text-center">
<label class="sr-only" for="name">Full Name</label>
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Full name" name="name" required data-validation-required-message="Please enter your full name." >
<p class="help-block text-danger"></p>
</div>
</div>
<div class="form-group form-group-lg">
<div class="col-lg-6 text-center">
<label class="sr-only" for="name">Your email</label>
<input type="email" class="form-control" type="text" id="formGroupInputLarge" placeholder="Your email" name="email" required data-validation-required-message="Please enter your email." data-validation-email-message="email not valid">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-lg-12 text-center">
<div id="success"></div>
<button type="submit" id="submit" class="btn btn-success btn-lg">Submit</button>
</div>
</form>
Any tips? Thanks a lot!
With the various answers I got. I managed to get it working. Here is the final code.
Feel free to comment if you see a problem with my answer!