Centering a form in bootstrap 3

Question

I am trying to center the content to center in bootstrap, i searched and found solution, which is not working for me, could someone help me out here,

<style>
   .center{
      margin:0 auto;
   }
</style>

<div class="center">
  <form method="post" action="" enctype="multipart/form-data">
    <div class="row">
      <div class="form-group col-xs-12 col-sm-6 col-md-3 col-lg-3">
        <label for="name">Book Name</label>
        <input type="text" name="name" class="form-control" id="name">
      </div>
    </div>
    <div class="row">
      <div class="form-group col-xs-12 col-sm-6 col-md-3 col-lg-3">
        <label for="author_id">Author</label>
        <select name="author_id" class="form-control" id="author_id">
          <option value="author_id">Author</option>
        </select>
      </div>
    </div>
  </form>
</div>

does this link helps you? http://stackoverflow.com/questions/20853066/how-to-center-form-in-bootstrap-3?rq=1 — Kheema Pandey, Mar 18 '14 at 12:57
In order to use the `margin: 0 auto` trick, you need to specify a fixed width for the container. — BenM, Mar 18 '14 at 13:01
Use 'text-center' instead of 'center' ( Bootstrap class http://getbootstrap.com/css/#type-emphasis ) — BENARD Patrick, Mar 18 '14 at 13:03
Have you tried using `class="center-block"`? See http://getbootstrap.com/css/#helper-classes-center — cvrebert, Mar 18 '14 at 16:33

score 2 · Accepted Answer · answered Mar 18 '14 at 13:01

In order for the .center div to be centered with margin: 0 auto; it also needs to have a set width value. By default, a div takes 100% of it's containers width. If the div is 100% wide, it can not be centered as it is in a way technically already centered. You could give .center a width to fix this...

.center {
    width: 400px;
    margin:0 auto;
}

You may not want a fixed width though, in-fact I'd say you definitely dont want that considering you are using a responsive template...

The better solution is to center the content, rather than the div container.

Try adding text-align: center; to the form-group class, or make your own class with text-align: center; and add the class to the HTML div's that group your labels/inputs.

.form-group {
    text-align: center;
}

Centering a form in bootstrap 3

1 Answers1