0

How do I vertically align elements in columns in Bootstrap. It's driving me mad. This is my HTML:

        <div class="row mx-3 border rounded">
          <div class="col-sm-6 p-3 ">
            <img src="/assets/uploads/user/headshot.jpeg" class="border rounded-circle comment-user-img">
            <span class="small-text align-middle">My name</span>
          </div>
          <div class="col-sm-6 p-3 text-right">
            <span class="small-text align-middle">Today's Date</span>
          </div>
        </div>

And this is the result: https://pasteboard.co/J7RKPj3.png

I have tried align-baseline, align-middle, putting it all in one column (float-right moves the date up)...nothing seems to work. I have looked at past answers but the answers don't seem refined for something so simple.

fraggley
  • 1,215
  • 2
  • 9
  • 19
  • 2
    Does this answer your question? [Vertical Align Center in Bootstrap 4](https://stackoverflow.com/questions/42252443/vertical-align-center-in-bootstrap-4) – dns_nx May 11 '20 at 11:10
  • h-100 and align-items-center in the did the trick. Thank you for saving my sanity – fraggley May 11 '20 at 11:14

1 Answers1

-1

Another solution to center align your text verticaly is by setting the CSS attribute line-height to your div height.

Here is an example https://www.w3schools.com/css/tryit.asp?filename=trycss_align_line-height

Mahyar Kia
  • 14
  • 7