How do I center a form which is wrapped in a flex container?

Question

.jumbotron {
  background-image: url(background.jpg);
  color: white;
  text-align: center;
}

<div class="jumbotron">
  <h1 class="display-4">My Awesome App</h1>
  <p class="lead">This is why you should download this fantastic app!</p>
  <p>Want to know more?</p>
  <p>Join our mailing list!</p>
  <hr>
  <form class="form-inline" id="jumbo-form">
    <div class="form-group mx-sm-3 mb-2">
      <input type="password" class="form-control" id="email" placeholder="Email">
    </div>
    <button type="submit" class="btn btn-primary mb-2">Sign Up Now</button>
  </form>
</div>

In the class of jumbotron, all content before the form is centered. However, the form is align left. I tried the solutions from other questions like adding absolute position and then margin:auto but still not working.

score 1 · Accepted Answer · answered Feb 12 '20 at 04:26

Your form is a flex container and flex can be horizontally center with justify-content: center; and vertically with align-items: center (If height is enough available)

Add below css and this will center the form

.form-inline {
 justify-content: center;
}

score 0 · Answer 2 · answered Feb 12 '20 at 04:38

0

If you are using bootstrap and the i would suggest using it strictly. Surround your form within Container, row, col. If you want to give padding or margin, use bootstrap classes. In this case:

<div class="container">
    <div class="row justify-content-center">
        Your Form goes here
    </div>
</div>

Have a look here: https://getbootstrap.com/docs/4.4/layout/grid/

answered Feb 12 '20 at 04:38

Anish Arya

518
1
7
24

1

Thanks! It is a good suggestion. I should make better use of the grid system. – Alfred Chow Feb 12 '20 at 06:28

score 0 · Answer 3 · edited Feb 12 '20 at 06:16

0

in your "form-inline" display is set to "flex" so you can add "justify-content:center;" to its css code or you can add "justify-content-center" to "class" attribute in your html.

edited Feb 12 '20 at 06:16

kernal_lora

1,115
3
12
25

answered Feb 12 '20 at 05:58

tahmina

1
1

your welcom. if you find it useful you should choose an answer and clarify that the question is solved. – tahmina Feb 12 '20 at 06:47

score 0 · Answer 4 · 2020-02-12T06:47:27.347

0

add this class inside the container class

<div class="row justify-content-center">
    Your Form
</div>

OR

<div class="row text-center">
     Your Form
</div>

edited Feb 12 '20 at 06:47

answered Feb 12 '20 at 06:23

score 0 · Answer 5 · answered Feb 12 '20 at 07:37

0

Usually the parent element prevent the element to get aligned as desired. It limits not only center but float as well.I tried to explain this in the following image. Please inspect the width of the parent element.Hope you will find this helpful.

answered Feb 12 '20 at 07:37

Sibtain

108
16

score 0 · Answer 6 · answered Feb 12 '20 at 08:24

Obviously you are using Bootstrap so try this :

<div class="container"> <div class="row justify-content-center"> Your Form  </div> </div>

Have a look here: https://getbootstrap.com/docs/

Or use css as following: .

form-inline{
       justify-content:center
}

How do I center a form which is wrapped in a flex container?

6 Answers6