How to center a form inside a Bootstrap 4 jumbotron [duplicate] - html

Question

This question already has an answer here:
bootstrap 4: center inline form inside a jumbotron
(1 answer)
Closed 5 years ago.
<div class="jumbotron text-center" id="jumbotron">
<h1 class="display-3">Lorem Ipsum</h1>
<p class="lead">Lorem ipsum</p>
<hr class="my-y-2">
<p>################</p>
<form class="form-inline">
<label class="sr-only" for="email">Email</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">#</div>
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
</div>
<button type="submit" class="btn btn-primary mb-2">Sign Up</button>
</form>
</div>
I'm trying to have this form inside a jumbotron and be at the center of it but I can't seem to make it work.

Answer 1

The Bootstrap 4 class you need in this case is justify-content-center.
Here's the working code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="jumbotron text-center" id="jumbotron">
<h1 class="display-3">Lorem Ipsum</h1>
<p class="lead">Lorem ipsum</p>
<hr class="my-y-2">
<p>################</p>
<form class="form-inline justify-content-center">
<label class="sr-only" for="email">Email</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">#</div>
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
</div>
<button type="submit" class="btn btn-primary mb-2">Sign Up</button>
</form>
</div>

Answer 2

You haven't posted any CSS so it's hard to understand where you are going wrong. But centering your form could be achieved wrapping your form in a
Example: JSFiddle.net
#form-align
{
display: block;
text-align: center;
}
form
{
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left;
}