Centering a form HTML/Bootstrap

Question

How do I centering this form? No matter what I've tried (changing around the div classes, the styles, etc. it still does not center).

I've tried looking at using flex box and other tools but regardless of what I do, if something gets centered, the input field stays to the far left.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div class="row text-center">
  <form>
    <div class="fc">
      <div class="fg cg">
        <h3>
          Name
        </h3>
        <input class="fc"style="width: 35%" type="text"></input>
      </div>
      <div class="fa">
        <input class="btn" type="submit" value="Submit"></input>
      </div>
    </div>
  </form>
</div>

note that `` is an empty tag. Means it has no closing tag. As such `` is invalid as it does not exist. — tacoshy, Jun 22 '21 at 21:21
@Grumpy when I do that, the input field still stays on the left of the page — , Jun 22 '21 at 21:23
I've tried that here: jsfiddle.net/TestFiddle1001/x8et6ydq/4 — , Jun 22 '21 at 21:50

score 0 · Answer 1 · answered Jun 22 '21 at 21:30

0

<div class="row text-center">
  <form>
        <h3>
          Name
        </h3>
        <input class="form-control" type="text">
        <input class="btn" type="submit" value="Submit">
  </form>
</div>

answered Jun 22 '21 at 21:30

Grumpy

2,140
1
25
38

This still doesn't really work for me, it fails to center the input field – Jun 22 '21 at 21:36

score 0 · Answer 2 · answered Jun 22 '21 at 21:42

Add margin: 0 auto; like @Sysix has said in the comments

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="row text-center">
  <form style="margin: 0 auto">
      <div class="fg cg">
        <h3>
          Name
        </h3>
        <input class="fc"style="width: 35%" type="text"></input>
      <div class="fa">
        <input class="btn" type="submit" value="Submit"></input>
      </div>
    </div>
  </form>
</div>

score 0 · Answer 3 · edited Jun 23 '21 at 13:42

Well there are many ways of centering. But since you are using Bootstrap I thought I'd try it using Bootstrap classes.

I use the grid system to build a row with one big column spanning the entire row. I wrap the form in a div with a utility class d-flex and modify it with justify-content-center to center it.

Inside the form I use the form-row. Then use form-group to indicate a column inside the form-row. To fix formatting I put form-control on the input.

And finally I put the button on a seperate form-row. This solves your problem with only bootstrap.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
  integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div class="row">

  <div class="col-12">

    <div class="d-flex justify-content-center">

      <form>
        <div class="form-row">

          <div class="form-group">

            <label for="name">Name</label>
            <input id="name" class="form-control" type="text">
          
          </div>

        </div>

        <div class="form-row">

          <div>
            <button class="btn" type="submit">Submit</btn>
            </div>
            
          </div>

      </form>

    </div>

  </div>

</div>

score 0 · Answer 4 · answered Jun 22 '21 at 23:56

0

Use this in the style

margin-left:auto;margin-right:auto;

Will also center anything for future reference

Also someone has already asked this before here: Centering a form in bootstrap not working

answered Jun 22 '21 at 23:56

WirelessTaco

36
7

score 0 · Accepted Answer · answered Jun 23 '21 at 02:06

You just need to make the form a column, then .text-center works:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div class="row text-center">
  <form class="col-12">

    <h3>
      Name
    </h3>
    <input class="fc" style="width: 35%" type="text"></input>
    <br/>
    <input class="btn" type="submit" value="Submit" />

  </form>
</div>

Centering a form HTML/Bootstrap

5 Answers5