Bootstrap Columns with vertically aligned text

Question

I have 2 bootstrap col-md-6 columns that one has an image in and the other has a p tag in it with a paragraph of text. how would i dynamically vertically align the text so its perfect compared to the image next to it, code below

<div class="col-md-6">
    <img class="img-responsive" src="https://picsum.photos/550/430" >
</div>
<div class="col-md-6">
    <p>text goes here</p>
</div>

i also need to be able to do the same thing with a column that may have 3 tags in it so a h3 p and an a tag.

so my advice is to upgrade to V4 [like my answer below] or check this link https://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3 — Temani Afif, Feb 08 '18 at 10:32

score 1 · Accepted Answer · answered Feb 08 '18 at 10:27

If you are using V4 of bootstrap you can simply rely on some class utilities and use align-items-center to achieve this:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row align-items-center">
    <div class="col">
      <img class="img-responsive" src="https://lorempixel.com/400/200/">
    </div>
    <div class="col">
      <p>text goes here</p>
    </div>
  </div>
</div>

Bootstrap Columns with vertically aligned text

1 Answers1