Vertical and horizontal text align bootstrap

I have the following below:

  <section class="m-5">
    <div class="container">
      <div class="row text-center justify-content-center" style="height:75px">
        <div id="one" class="col-2 border ">1</div>
        <div id="two" class="col-2 border ">2</div>
        <div id="three" class="col-2 border ">3</div>
      </div>
    </div>

The text (1, 2, 3) are centered horizontally, but not vertically.

Is there a way for me to center the texts both vertically and horizontally at the same time with bootstrap?

Hello @nonamesareleft,

I am really not good with bootstrap but after googling, most people are recommending use of CSS display: flex for vertically centering text inside a container. I believe you you can also do the same using display: flex in bootstrap. Try the following:
Bootstrap

 <div id="one" class="col-2 border d-flex align-items-center justify-content-center">1</div>

CSS

#one{
    display: flex;
    align-items: center;
    justify-content: center;
}

I hope that helps.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.