Bootstrap 3 help-block layout issue

Question

I just registered on stackoverflow, so please go easy on me.

I am building a bootstrap form that is one column on mobile phones (xs) and two columns on anything larger (sm and above).

I am using php to validate user entry and if everything validates the process goes to the next page, however if there is an error then the same page reloads with already selected values as ore-selected on the form and I am also dynamically applying has-error class and a help-block span for more info.

My problem is that when the help-block span is added then the layout is messed up because the space below the form field with the error remains blank and instead pushes out the next form field to the right.

Here is a jsfiddle before the error: https://jsfiddle.net/ngu5pdx9/

Here is a jsfiddle with the error: https://jsfiddle.net/zvrzfty2/

Just for added measure here is php/html code as well.

        <div class="col-xs-12 col-sm-6 PT20">
        <div class="form-group<?php if ($val_bedrooms == "N") { ?> has-error<?php } ?>">
            <div class="col-xs-12 col-sm-10 col-md-10 col-md-offset-1 MB20">
                <label for="bedrooms" class="col-xs-12 control-label acenter" style="line-height: 1em;">Bedrooms</label>
                <div class="col-xs-12">
                    <select name="bedrooms" class="form-control">
                        <option value="">Please select</option>
                        <option <?php if ($bedrooms == 1) { ?>selected<?php } ?> value="1">1 bedroom</option>
                        <option <?php if ($bedrooms == 2) { ?>selected<?php } ?> value="2">2 bedrooms</option>
                        <option <?php if ($bedrooms == 3) { ?>selected<?php } ?> value="3">3 bedrooms</option>
                        <option <?php if ($bedrooms == 4) { ?>selected<?php } ?> value="4">4 bedrooms</option>
                        <option <?php if ($bedrooms == 5) { ?>selected<?php } ?> value="5">5 bedrooms</option>
                        <option <?php if ($bedrooms == 6) { ?>selected<?php } ?> value="6">6 or more bedrooms</option>
                   </select>
                    <?php if (strlen($help_bedrooms) > 0) { ?><span class="help-block"><?php echo $help_bedrooms; ?></span><?php } ?>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 PT20">
        <div class="form-group<?php if ($val_bathrooms == "N") { ?> has-error<?php } ?>">
            <div class="col-xs-12 col-sm-10 col-md-10 col-md-offset-1 MB20">
                <label for="bathrooms" class="col-xs-12 control-label acenter" style="line-height: 1em;">Bathrooms</label>
                <div class="col-xs-12">
                    <select name="bathrooms" class="form-control">
                        <option value="">Please select</option>
                        <option <?php if ($bathrooms == 1) { ?>selected<?php } ?> value="1">1 full bathroom</option>
                        <option <?php if ($bathrooms == 2) { ?>selected<?php } ?> value="2">2 full bathrooms</option>
                        <option <?php if ($bathrooms == 2.5) { ?>selected<?php } ?> value="2.5">2 full and 1 half bathrooms</option>
                        <option <?php if ($bathrooms == 3) { ?>selected<?php } ?> value="3">3 full bathrooms</option>
                        <option <?php if ($bathrooms == 3.5) { ?>selected<?php } ?> value="3.5">3 full and 1 half bathrooms</option>
                        <option <?php if ($bathrooms == 4) { ?>selected<?php } ?> value="4">4 full bathrooms</option>
                        <option <?php if ($bathrooms == 4.5) { ?>selected<?php } ?> value="4.5">4 full and 1 half bathrooms</option>
                        <option <?php if ($bathrooms == 5) { ?>selected<?php } ?> value="5">5 full bathrooms</option>
                        <option <?php if ($bathrooms == 5.5) { ?>selected<?php } ?> value="5.5">5 full and 1 half bathrooms</option>
                        <option <?php if ($bathrooms == 6) { ?>selected<?php } ?> value="6">6 or more full bathrooms</option>
                   </select>
                    <?php if (strlen($help_bathrooms) > 0) { ?><span class="help-block"><?php echo $help_bathrooms; ?></span><?php } ?>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xs-12 col-sm-6 PT20">
        <div class="form-group<?php if ($val_stories == "N") { ?> has-error<?php } ?>">
            <div class="col-xs-12 col-sm-10 col-md-10 col-md-offset-1 MB20">
                <label for="stories" class="col-xs-12 control-label acenter" style="line-height: 1em;">Stories</label>
                <div class="col-xs-12">
                    <select name="stories" class="form-control">
                        <option value="">Please select</option>
                        <option <?php if ($stories == 1) { ?>selected<?php } ?> value="1">Single story house</option>
                        <option <?php if ($stories == 2) { ?>selected<?php } ?> value="2">Two stories</option>
                        <option <?php if ($stories == 3) { ?>selected<?php } ?> value="3">Three or more stories</option>
                   </select>
                    <?php if (strlen($help_stories) > 0) { ?><span class="help-block"><?php echo $help_stories; ?></span><?php } ?>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 PT20">
        <div class="form-group<?php if ($val_sqf == "N") { ?> has-error<?php } ?>">
            <div class="col-xs-12 col-sm-10 col-md-10 col-md-offset-1 MB20">
                <label for="sqf" class="col-xs-12 control-label acenter" style="line-height: 1em;">Sq footage</label>
                <div class="col-xs-12">
                    <select name="sqf" class="form-control">
                        <option value="">Please select</option>
                        <option <?php if ($sqf == "Less than 1,500 sqf") { ?>selected<?php } ?> value="1">Less than 1,500 sqf</option>
                        <option <?php if ($sqf == "1,500 - 2,499 sqf") { ?>selected<?php } ?> value="2">1,500 - 2,499 sqf</option>
                        <option <?php if ($sqf == "2,500 - 3,499 sqf") { ?>selected<?php } ?> value="2">2,500 - 3,499 sqf</option>
                        <option <?php if ($sqf == "3,500 - 5,000 sqf") { ?>selected<?php } ?> value="2">3,500 - 5,000 sqf</option>
                        <option <?php if ($sqf == "More than 5,000 sqf") { ?>selected<?php } ?> value="2">More than 5,000 sqf</option>
                   </select>
                    <?php if (strlen($help_sqf) > 0) { ?><span class="help-block"><?php echo $help_sqf; ?></span><?php } ?>
                </div>
            </div>
        </div>
    </div>

Answer 1

You can solve this by wrapping your first two columns, and last two columns in a row, like so:

<div class="row"> ... </div>

You want two rows, this should keep things nicely aligned. Here's the jsfiddle showing the change:

https://jsfiddle.net/ocuatf8u/