How to center text in a row using Bootstrap 4

user_7131162 0
Viewed 42550

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;
}
bootstrap-4 twitter-bootstrap
4 Answers

The best way to do this is to wrap the text in a column that has the class text-center.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container">
  <div class="row" id="appSummary">
    <div class="col text-center">
      <h1>Why This App Is Awesome</h1>
      <p class="lead">Summary, once again, of your app's awesomeness</p>
    </div>
  </div>
</div>

An other way to do this is to use the class justify-content-center on the row, but without the column things may break.

user_89188930

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

#appSummary{
    justify-content:center;
}

Bootply example

user_6164430

Use d-flex flex-column : more here 

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

        </div>
 </div>
user_6750060

You can use margin: auto for centering item, rather than text-align: center why?

margin: 0 auto; affects the container directly, and when the container is block-level (display: block).

text-align: center; center affects text, inline, and inline-block level children of a container - not the container itself.

reference

i created example in jsfiddle

user_77792480
Related