How to get forms in the center

Question

I don't find any code that's aligned if jumbotron class is aligned center.

I just get use the text-align: center, but sign up area don't move.

I find nowhere.

 .jumbotron {

        background-image: url(background.jpg);
        text-align: center;
    }


<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>


  <form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email address</label>

  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Email address</label>
    <input type="password" class="form-control" id="email" placeholder="Your email">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Sign up</button>
</form>

last div included

like below picture

enter image description here

score 0 · Answer 1 · answered May 13 '19 at 16:44

0

Take a div tag and put your form inside it . Give the div tag a property that is text-align center .it will help you.

answered May 13 '19 at 16:44

Ricky

488
3
14

Try text-align:center !important; – Ricky May 13 '19 at 17:10
I have one more idea give it position as absolute and try margin :auto; – Ricky May 13 '19 at 17:13
I tried too long, so I see back to the code update script. – Bilguun enkhee May 13 '19 at 17:30
https://stackoverflow.com/questions/22658141/css-center-form-in-page-horizontally-and-vertically – Ricky May 13 '19 at 17:41
Look at this i think it will help you – Ricky May 13 '19 at 17:42
With bootstrap, trying putting the form in a col inside of a row. You can control how big the col is by using 1 through 12. The other option is using flex box to center the element horizontally and vertically, which is in version 4 of bootstrap. – WTFranklin May 13 '19 at 17:44
@RIcky it didn't help. – Bilguun enkhee May 13 '19 at 18:01
Give your form a property display:inline block – Ricky May 13 '19 at 18:07
I dont have my system right now and my phone don't allow me to write code – Ricky May 13 '19 at 18:09
I did use

...

and class { margin: auto; max-width: } , it worked anyway – Bilguun enkhee May 13 '19 at 18:24
1

I used to text-align-center and class with center!important. It worked perfectly to my answer! – Bilguun enkhee May 13 '19 at 19:07

score 0 · Answer 2 · answered May 13 '19 at 19:52

There are so many ways to do it. With bootstrap4, you can use its flexbox utility classes without writing any custom styles.

<div class="jumbotron text-center">
    TEXT
    ...
    <div class="d-flex flex-row justify-content-center">
        <form class="form-inline">
            <div class="form-group ...">
                <label />
                <input />
            </div>
            <button type="submit" />
        </form>
    </div>
</div>

https://jsfiddle.net/davidliang2008/xa62ygzq/24/

How to get forms in the center

2 Answers2