Align form in Bootstrap 4 Alpha 6?

Question

with the new Alpha 6 update of Bootstrap 4 the form alignment seems to be reliant on some new classes, I've tried adding the .mx-auto class with the display: block class within the CSS however nothing seems to move it.

This is the code I have, can anyone shed any light on how I can get the simply form into the center of the screen?

<section id="form">
   <div class="container">
       <div class="row">

                <div class="col-md-12">
                    <form class="form-inline" role="form" method="post">
                        <input type="email" class="form-control form-control-sm" name="email" placeholder="enter your email">
                        <button type="submit" class="btn btn-signup" name="submit" value="send">sign up</button>
                    </form>

              </div>

        </div>  
    </div>
</section>

This is the CSS which worked in Alpha 5. Now I understand the text alignments no longer work.

#form {
    text-align:center;
    color:white;
}

Answer 1

In the new Alpha 6 update of Bootstrap 4 "form-inline" class gets new declaration of display property with the value "flex".

For you to bring the the form in the center, need to set it to "block".

.form-inline{
  display: block;
}

Hope this solves your problem. Thanks :)

Answer 2

Add justify-content-center class to your form:

<section id="form">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <form class="form-inline justify-content-center" role="form" method="post">
          <input type="email" class="form-control form-control-sm" name="email" placeholder="enter your email">
          <button type="submit" class="btn btn-signup" name="submit" value="send">sign up</button>
        </form>
      </div>
    </div>  
  </div>
</section>