Center form in bootstrap

Question

I am having issues centering a form in Bootstrap. I also don't seem to be able to resize the input boxes. I would like to have it centered.

This is what I have:

     <div class="form-group row" id="SignupCreate">
      <div class="col-sm-4">
    <label>Email</label>
      <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>

      <div class="col-sm-4">
    <label>Password</label>
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
  <div class="col-sm-4">
      <button type="submit">Submit</button>
  </div>
    </div>
    </div>

And for CSS I started:

#SignUpCreate {
    padding-top: 200px;
    margin-right: 30px;
    margin-left: 30px;

}

I assume by "centered" you mean equal margins on each side? Also, if you format this better, you'd see that you've nested some columns incorrectly. — Tieson T., May 01 '17 at 03:27
You're using `id="SignupCreate"` in your html and `#SignUpCreate` in CSS. The cases need to match. — Michael Coker, May 01 '17 at 03:28

Rahul · Accepted Answer · 2017-05-01T03:46:46.417

you only need to apply some width and make it center with margin: 0 auto

<div class="form-group row" id="signupcreate">
        <div class="col-sm-4">
            <label>Email</label>
            <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
        <div class="col-sm-4">
            <label>Password</label>
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
        <div class="col-sm-4">
            <button type="submit">Submit</button>
        </div>
    </div>

below code will center your form

#signupcreate{
  width: 60%;
  margin: 0 auto;
  float: none;
}

For some reason, my password field and label still don't align to the center. — Catalina, May 01 '17 at 03:40

score 0 · Answer 2 · answered May 01 '17 at 03:33

0

You probably want to put it inside a container. Like this:

<div class="container">
  <div class="row">

    // Your code here

  </div>
</div>

Possible duplicate of: Center Form using Twitter Bootstrap

answered May 01 '17 at 03:33

Sagar Vora

81
4

Diego Ponciano · Answer 3 · 2020-10-26T01:03:39.387

There are a couple ways to solve this but I really recommend to use bootstrap itself to do it.

What I recommend is using offsets. So if you want your form centered just use something like:

<div class="form-group row" id="SignupCreate">
      <div class="col-sm-4 col-sm-offset-4">
      <label>Email</label>
      <input type="email" class="form-control" id="inputEmail" placeholder="Email">
      </div>

 <div class="col-sm-4 col-sm-offset-4">
    <label>Password</label>
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    <div class="col-sm-4">
      <button type="submit">Submit</button>
    </div>
</div>
</div>

You can tweak your offsets for xs, sm, md and lg accordingly, make sure to set offset to 0 if you don't want offset in a particular view.

Now for your styles, you are giving css a SignUpCreate id when in fact is SignupCreate, remember css selectors are case sensitive.

Also keep in mind for the future that when using bootstrap you should try as much to stick to the framework and use all its features instead of coding your own CSS, and when you do, a good thing to keep in mind is that CSS uses "points" to know which styles are more relevant, I recommend checking Specifics on CSS Specificity

So let's say you want to style something that has padding right and left, I would avoid using a row or column element to do this and would add a second container div to "respect" bootstrap styles.

I hope this answer is helpful :)

There is also a good answer here: Center a column using Twitter Bootstrap 3

UPDATE:

With boostrap 4.5^ you can center any item using d-flex justify-content-center on the parent, if you also want to align the items vertically (relative to the parent's height) simply add align-items-center.

Center form in bootstrap

3 Answers3