Bootstrap checkbox alignment issue

Question

I'm using standard Bootstrap 3 classes to style a modal. I'm having some issues with the alignment of a checkbox, and can't for the life of me figure out how to fix it.

Here's what it looks like when it's full-width:

The checkbox is not quite aligned center-vertical with the text, and it would be nice to fix, but that's not my main issue.

Here's what it looks like at a narrower view:

At first I thought it was something in my code, like a style that was overriding Bootstrap, but I've copied my html into a bootply using nothing but standard bootstrap classes, and it behaves the same way.

My css is nothing to write home about; can anyone help me?

Answer 1

You have to change some classes. In the form you have the class form-inline. You must get rid of that class because all the elements get inline inside.

In the input the class .form-control are set to width: 100%; by default, So you must clean that class.

HTML

<div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="trialModal" class="modal fade in" style="display: block;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<h4 class="modal-title">Free Trial!</h4>
</div>
<div class="modal-body">
<p style="display:none" id="confirm_message">Thanks for your interest in OurProduct.</p>
<p style="display:none" id="error_message"></p>
<form class="">
<div class="form-group">
                        <label for="mail">Email</label><br><input placeholder="jane.doe@example.com" id="mail" class="form-control" type="email"></div>
<div class="form-group">
  <input class="" id="agree_terms" value="1" type="checkbox">I confirm that I am over 13 years of age and agree to the <a id="modal_privacy_link">Terms and Conditions and Privacy Policy</a>.
                    </div>
</form>
<div class="modal_privacy">
<h2>Terms and Conditions and Privacy Policy</h2>
<p>We may send you information about our products and services and may contact you about new features or products in which we believe you may be interested. We also may use your contact information for marketing and other purposes. Although we do not currently rent, sell, or otherwise share your information with third parties for purposes unrelated to our products and services, we may do so in the future. If you do not want your information to be shared, you should contact us at <a href="mailto:support@ourproduct.com">support@ourproduct.com</a>. The supply of our products and services will not be conditional upon you consenting to the collection, use, or disclosure of personally identifiable information beyond that required to provide our products, services, or other related purposes.</p>
</div>
</div>
<!-- create new form in block here. just email. call new module to send email and create user--><div class="modal-footer">
                <button id="email_link" class="btn btn-default" type="button">Email me a link</button><br><button id="download_trial_64" class="btn btn-default" type="button">Download 64-bit trial</button><br><button id="download_trial_32" class="btn btn-default" type="button">Download 32-bit trial</button><br><button id="working_link" class="btn btn-default" type="button" style="display: none"><span class="glyphicon glyphicon-refresh spinning"></span> Processing...</button>
            </div>
</div>
<!--         /.modal-content --></div>
<!--     /.modal-dialog --></div>

DEMO HERE

Answer 2

As a good UX practice and HTML syntax, you should put your message between <label> tags to actually check the box when you click on the message.

<div class="form-group">
  <input class="" id="agree_terms" value="1" type="checkbox">
  <label for="agree_terms">I confirm that I am over 13 years of age and agree to the <a id="modal_privacy_link">Terms and Conditions and Privacy Policy</a>.</label>
</div>