Bootstrap center form

Question

I can't seem to get my form to center using bootstrap (I am a beginner). I have read a few different things but none seem to work for me.I want it the same size just centered. Any help would be greatly appreciated!

Here is the html:

<div class="container">
  <div class="row">
    <form name="sentMessage" id="contactForm" novalidate>
      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name.">
            <p class="help-block text-danger"></p>
          </div>
          <div class="form-group">
            <input type="email" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">
            <p class="help-block text-danger"></p>
          </div>
          <div class="form-group">
            <input type="tel" class="form-control" placeholder="Your Phone *" id="phone" required data-validation-required-message="Please enter your phone number.">
            <p class="help-block text-danger"></p>
          </div>
          <div class="form-group">
            <textarea rows="6" class="form-control" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea>
            <p class="help-block text-danger"></p>
          </div>
        </div>

        <div class="clearfix"></div>
        <div class="col-lg-12 text-center">
          <div id="success"></div>
          <button type="submit" class="btn btn-xl">Send Message</button>
        </div>
      </div>
    </form>
  </div>
</div>

Answer 1

You can keep your form centered by adding some additional Bootstrap classes, which will also keep the design reactive depending on screen width.

Simply add some offset-3 classes for each of the sizes you're using, and add additional sm and xs sizes just after your row dive. No additional CSS needed.

FIDDLE

HTML:

<div class="container">
    <div class="row">
        <form name="sentMessage" id="contactForm" novalidate>
            <div class="row">
                <div class="col-md-offset-3 col-sm-offset-3 col-xs-offset-3 col-md-6 col-sm-6 col-xs-6">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name.">
                        <p class="help-block text-danger"></p>
                    </div>
                    <div class="form-group">
                        <input type="email" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">
                        <p class="help-block text-danger"></p>
                    </div>
                    <div class="form-group">
                        <input type="tel" class="form-control" placeholder="Your Phone *" id="phone" required data-validation-required-message="Please enter your phone number.">
                        <p class="help-block text-danger"></p>
                    </div>
                    <div class="form-group">
                        <textarea rows="6" class="form-control" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea>
                        <p class="help-block text-danger"></p>
                    </div>
                </div>
                <div class="clearfix"></div>
                <div class="col-lg-12 text-center">
                    <div id="success"></div>
                    <button type="submit" class="btn btn-xl">Send Message</button>
                </div>
            </div>
        </form>
    </div>
</div>

Answer 2

This should do the trick... First off, the fix was pretty simple and I was able to do it with a BootStrap "helper class" and one Bootstrap class edit.

So, there was an extra row so I deleted that. I changed your "col-md-6" to "col-md-12" to take up the full width of the container. To compensate for size, I added a max-width to the "form-group" class as well as applied the Bootstrap helper class "center-block" to all three "form-group" classes.

This fixes the issue for now. I'm not quite sure using paragraph tags in a form will work, but that's not your question.

Hope this helps...

FIDDLE HERE

<div class="container">
 <div class="row">
   <form name="sentMessage" id="contactForm" novalidate>
    <div class="col-md-12">
      <div class="form-group center-block">
        <input type="text" class="form-control" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name.">
         <p class="help-block text-danger"></p>
      </div>
      <div class="form-group center-block">
        <input type="email" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">
        <p class="help-block text-danger"></p>
      </div>
      <div class="form-group center-block">
        <input type="tel" class="form-control" placeholder="Your Phone *" id="phone" required data-validation-required-message="Please enter your phone number.">
        <p class="help-block text-danger"></p>
      </div>
      <div class="form-group center-block">
        <textarea rows="6" class="form-control" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea>
        <p class="help-block text-danger"></p>
      </div>
    </div>

    <div class="clearfix"></div>
    <div class="col-lg-12 text-center">
      <div id="success"></div>
      <button type="submit" class="btn btn-xl">Send Message</button>
    </div>
  </div>
</form>

</div>

and a CSS class edit like:

.form-group {
 max-width: 300px;
}

Alternatively, should you not want to overwrite a Bootstrap class you could always create your own class as well... something like this:

<div class="form-group center-block myclassname">
  <input type="email" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">
      <p class="help-block text-danger"></p>
</div>

Then make the CSS in your separate stylesheet:

.myclassname {
   max-width: 300px;
}

Either way would work.