Bootstrap 4: can't vertical align middle text

Question

I want to have the text be vertically aligned in the middle and if possible nearer to the image. But vertical align middle does not seem to be working. Also, when i change the screen's width it does not resize but turned from horizontal row to vertical, and fails to stay in the section.

I currently have a div row in a section, which gives me this result:

When changing screen's width:

Code:

<section style="background-color:lightblue;">
  <div class="container-fluid justify-content-center align-middle text-center pt-2 pb-2" style="max-height:600px">
    <div class="row no-gutters align-middle">
      <div class="col-lg-5">
        <h2>Text</h2>
        <p>Et qui deserunt nostrum epellatsitatibus et id veniam eius veniam animi repellat quas.</p>
      </div>
      <div class="col-lg-2">
        <img src='img\img_combined2.png' alt='' style="max-height:600px;"/>
      </div>

      <div class="col-lg-5 text-center align-middle">
      <h2>Text</h2>
        <p>Et qui deserunt nostrum voluptates error quod. Quia reiciendis beatae. Hic beatae molestiaeserunt autem. Est necessitatibus et id veniam eius veniam animi repellat quas.</p>
      </div>
    </div>
  </div>
</section>

`I want to have the text be vertically aligned in the middle` --> Replace `align-middle` with `align-items-center` in `.row` div — Athul Nath, Mar 27 '18 at 06:06
@Anuresh, it worked, would you please submit an answer so i can give it a tick — Tix, Mar 27 '18 at 06:08

score 1 · Answer 1 · answered Mar 27 '18 at 06:01

1

max-width:100%;
max-height:100%;

this may help use it for image size which will fit the outer div even if size increases

answered Mar 27 '18 at 06:01

Ankit Singh

173
2
19

That's possible with Bootstrap classes: https://getbootstrap.com/docs/4.0/utilities/sizing/ – Klooven Mar 27 '18 at 07:59

score 1 · Accepted Answer · answered Mar 27 '18 at 06:10

Replace align-middle with align-items-center in .row div

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

<section style="background-color:lightblue;">
  <div class="container-fluid justify-content-center align-middle text-center pt-2 pb-2" style="max-height:600px">
    <div class="row no-gutters  align-items-center">
      <div class="col-lg-5">
        <h2>Text</h2>
        <p>Et qui deserunt nostrum epellatsitatibus et id veniam eius veniam animi repellat quas.</p>
      </div>
      <div class="col-lg-2" style="height:600px">
        <img src='img\mywater_img_combine2.png' alt='' style="max-height:600px;"/>
      </div>

      <div class="col-lg-5 text-center align-middle">
      <h2>Text</h2>
        <p>Et qui deserunt nostrum voluptates error quod. Quia reiciendis beatae. Hic beatae molestiaeserunt autem. Est necessitatibus et id veniam eius veniam animi repellat quas.</p>
      </div>
    </div>
  </div>
</section>

View in full screen

Bootstrap 4: can't vertical align middle text

2 Answers2