title: How to center a form inside a Bootstrap 4 jumbotron
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="jumbotron text-center" id="jumbotron"&gt;
    &lt;h1 class="display-3"&gt;Lorem Ipsum&lt;/h1&gt;
    &lt;p class="lead"&gt;Lorem ipsum&lt;/p&gt;
    &lt;hr class="my-y-2"&gt;
    &lt;p&gt;################&lt;/p&gt;
    &lt;form class="form-inline"&gt;
  
      &lt;label class="sr-only" for="email"&gt;Email&lt;/label&gt;
      &lt;div class="input-group mb-2 mr-sm-2"&gt;
        &lt;div class="input-group-prepend"&gt;
          &lt;div class="input-group-text"&gt;@&lt;/div&gt;
  
          &lt;input type="email" class="form-control" id="email" placeholder="Email"&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;button type="submit" class="btn btn-primary mb-2"&gt;Sign Up&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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.</p>