0

.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.

0

6 Answers 6

1

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;
}
0
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/

1
  • 1
    Thanks! It is a good suggestion. I should make better use of the grid system. Feb 12, 2020 at 6:28
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.

1
  • your welcom. if you find it useful you should choose an answer and clarify that the question is solved.
    – tahmina
    Feb 12, 2020 at 6:47
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>
0
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. Common issue while aligning content to the center

0

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
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.