Align elements in bootstrap

Question

How can I get the fa-icon and the text to be vertically aligned in the row (visually)

<div class="row first-row">
            <div class="d-inline col-xs-12 col-sm-1 col-md-1">
                <i class="fa fa-camera-retro fa-2x"></i>
            </div>
            <div class="d-inline align-middle col-xs-12 col-sm-6 offset-sm-1 offset-md-0 img-text">In New York</div>
            <div class="d-inline col-sm-2 date-text">17-08-2010</div>
            <div class="media col-sm-8 offset-sm-1">
                <img src="images/innewyork.jpg" class="img-fluid rounded" alt="Responsive image">
            </div>
        </div>

Welcome to Stack Overflow, your question should contain [a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). On a side note, do those elements actually have to be in their own columns like you have them? Seems unnecessary. — hungerstar, Jan 10 '18 at 17:42
I tried to add --style="vertical-align: middle"-- to the text div tags to no avail — Hisham Aziz, Jan 10 '18 at 17:53

score 0 · Accepted Answer · answered Jan 10 '18 at 18:11

Add the class align-items-center to your row. This will cause the columns within that row to align vertically with one another; though I should note that your col breakdown exceeds 12 columns.

Your code, with the columns adjusted to sum to 12, might look something similar to the following:

<div class="container-fluid">
  <div class="row align-items-center">
    <div class="col-1">
      <i class="fa fa-camera-retro fa-2x"></i>
    </div>

    <div class="col-4">
        In New York
    </div>

    <div class="col-4 text-right">
      17-08-2010
    </div>

    <div class="col-3 text-center">
      <img src="images/innewyork.jpg" class="img-fluid rounded" alt="Responsive image">
    </div>
  </div>
</div>

Note: This does require Bootstrap 4.

Align elements in bootstrap

1 Answers1