Using text-align center to center the email form : - html

Question

I am trying to make an app landing Page using bootstrap framework (Bootstrap 4 alpha). While trying to align everything in center I used text-align:center in jumbotron id. Everything except email form aligned.
Is there any way to align email form in center as well also making sure that it remains in center irrespective of web page width.
This is the code in stylesheet.
.jumbotron
{
background-image: url(background.jpg);
text-align: center;
margin-top: 50px;
}
This is the main code.
<div class="jumbotron" id="jumbotron">
<h1 class="display-3">My Awesome App!</h1>
<p class="lead">This is why YOU should download this fantastic app!</p>
<hr class="m-y-2">
<p>Want to know more? Join our mailing list!</p>
<form class="form-inline" id = "emailbar">
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<div class="input-group">
<div class="input-group-addon">#</div>
<input type="email" class="form-control" id="email" placeholder="Your email">
</div>
</div>
<button type="submit" class="btn btn-primary">Sign up</button>
</form>
</div>

Answer 1

Since your form has display: flex it spans the whole width of its parent.
Also the text-align: center in your jumbotron class won't apply to the forms element as they are flex items.
So change either of these in your form-inline class
change it to display: inline-flex (and the text-align: center will apply)
add justify-content: center; (the Flexbox property to align horizontally in row direction)
To target only the emailbar, do like this
#emailbar {
display: inline-flex;
}
or this
#emailbar {
justify-content: center;
}

Answer 2

Just add css part in jumbotron to get the center.
.jumbotron {
background-image: url(background.jpg);
text-align: center;
margin-top: 50px;
display: flex;/*Add this*/
flex-direction: column; /*Add this*/
align-items: center; /*Add this*/
}
Working fiddle
.jumbotron {
display: flex;/*Add this*/
flex-direction: column; /*Add this*/
align-items: center; /*Add this*/
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<div class="jumbotron" id="jumbotron">
<h1 class="display-3">My Awesome App!</h1>
<p class="lead">This is why YOU should download this fantastic app!</p>
<hr class="m-y-2">
<p>Want to know more? Join our mailing list!</p>
<form class="form-inline" id="emailbar">
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<div class="input-group">
<div class="input-group-addon">#</div>
<input type="email" class="form-control" id="email" placeholder="Your email">
</div>
</div>
<button type="submit" class="btn btn-primary">Sign up</button>
</form>
</div>

Answer 3

There's no reason for extra CSS. Just use justify-content-center on the form...
https://www.codeply.com/go/7LjBkEtvVV
<form class="form-inline justify-content-center" id = "emailbar">
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<div class="input-group">
<div class="input-group-addon">#</div>
<input type="email" class="form-control" id="email" placeholder="Your email">
</div>
</div>
<button type="submit" class="btn btn-primary">Sign up</button>
</form>