How to center text in a row using Bootstrap 4

Question

The problem is that <p> and <h1> are appearing on same line and no matter what I do they can't be centered.

HTML

<div class="container">
  <div class="row" id="appSummary">
    <h1>Why This App Is Awesome</h1>
    <p class="lead">Summary, once again, of your app's awesomeness</p>
  </div>
</div>

CSS

#appSummary{
  text-align:center;
}

Answer 1

Since you're using Bootstrap 4 which uses the flex model, change your CSS rule to:

#appSummary{
    justify-content:center;
}

Bootply example