title: How to center text in a row using Bootstrap 4
body: <p>The problem is that <code>&lt;p&gt;</code> and <code>&lt;h1&gt;</code> are appearing on same line and no matter what I do they can't be centered. </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row" id="appSummary"&gt;
      &lt;h1&gt;Why This App Is Awesome&lt;/h1&gt;
      &lt;p class="lead"&gt;Summary, once again, of your app's awesomeness&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#appSummary{
    text-align:center;
  }
  </code></pre>