title: bootstrap 4: center inline form inside a jumbotron
body: <p>I have an inline form inside a jumbotron. I want to center it. </p>
  
  <p>I tried using <code>text-align:center</code> on the jumbotron and it did center all the other elements inside the jumbotron except for the inline form element. So I don't know what is going wrong here.</p>
  
  <p>This is the HTML code:</p>
  
  <pre><code>&lt;div class="jumbotron" id="home"&gt;
    &lt;h1 class="display-3"&gt;My Awesome App!&lt;/h1&gt;
    &lt;p class="lead"&gt;This is why you should download this fantastic app!&lt;/p&gt;
    &lt;hr class="my-4"&gt;
    &lt;p&gt;Want to know more? Join our mailing list!&lt;/p&gt;
    &lt;form class="form-inline"&gt;
      &lt;label class="sr-only" for="yourEmail"&gt;Email&lt;/label&gt;
      &lt;div class="input-group mb-2 mr-sm-2 mb-sm-0"&gt;
        &lt;div class="input-group-addon"&gt;@&lt;/div&gt;
        &lt;input type="text" class="form-control" id="yourEmail" placeholder="Your Email"&gt;
      &lt;/div&gt;
      &lt;button type="button" class="btn btn-primary my-2 my-sm-0"&gt;Sign Up&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>body{
    position: relative;
  }
  
  #home{
    background-image: url('../img/jumbotron-bkg-2.jpg');
    margin-top: 50px;
    text-align: center;
  }
  
  #yourEmail{
    width: 350px;
  }
  
  #about h2, #about-summary{
    text-align: center;
  }
  
  .card{
    margin-bottom: 30px;
  }
  
  .card img{
    height: 350px;
    width: 100%;
  }
  
  #cards-container{
    margin-bottom: 50px;
    padding: 20px 40px;
  }
  
  #download{
    text-align: center;
    padding-top: 100px;
    padding-bottom: 150px;
    background-color: #0afff2;
  }
  </code></pre>