How to vertically and horizontally center text inside columns?

Question

How to vertically and horizontally center text inside both the columns? I'm using bootstrap 4.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">

<div class="row">

  <div class="col">
    <h1>
      <p> hello hello hello hello hello hello hello hello hello hello hello hello
      </p>

    </h1>

  </div>
  <div class="col">
    <p> hello hello hello hello hello hello hello hello hello hello hello hello
    </p>
  </div>
</div>

h1 cannot have any block element for child, only phrasing content :( — G-Cyrillus, Jun 27 '17 at 15:34

score 3 · Answer 1 · answered Jun 27 '17 at 15:49

3

Use "display: flex" property and apply these...

To align content horizontally justify-content: center;

To align content vertically align-items: center;

.col {
    display: flex;
    justify-content: center;
    align-items: center;
}

answered Jun 27 '17 at 15:49

Mohideen bin Mohammed

18,813
10
112
118

score 2 · Answer 2 · answered Jun 27 '17 at 15:39

This what you need? Having height for row would visualize better.

.col {
  display: flex;
  justify-content: center;
  align-items: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="row">
  <div class="col">
    <h1>
      <p> hello hello hello hello hello hello hello hello hello hello hello hello
      </p>
    </h1>
  </div>
  <div class="col">
    <p> hello hello hello hello hello hello hello hello hello hello hello hello
    </p>
  </div>
</div>

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

You can use the flexbox properties via dedicated class:

https://v4-alpha.getbootstrap.com/utilities/flexbox/#align-items

Align items

Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from start, end, center, baseline, or stretch (browser default).

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">

<div class="row">

  <div class="col d-flex align-items-center ">
    <h1>
      <p> hello hello hello hello hello hello hello hello hello hello hello hello
      </p>

    </h1>

  </div>
  <div class="col d-flex align-items-center">
    <p> hello hello hello hello hello hello hello hello hello hello hello hello
    </p>
  </div>
</div>

How to vertically and horizontally center text inside columns?

3 Answers3

Align items