Can't get input to align vertically center within Bootstrap 4 column

Question

I am trying to create some form elements and vertically align the inputs within the columns. I tried using vertical-align:middle; and margin:auto 0; but neither seem to work.

input {
  vertical-align:middle;
  margin:auto 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-sm-9">
      <div class="form-group">
          <div class="row">
            <label for="phonenum" class="col-sm-2">Enter your phone number</label>
            <div class="col-sm-10">
                <input type="text" name="phonenum" />
            </div>
          </div>
      </div>
    </div>
  </div>
</div>

what do you expect exactly? You want the input and the label to be on the same line? — IvanS95, Jan 28 '19 at 20:55

score 2 · Accepted Answer · answered Jan 28 '19 at 20:56

I'm not exatly sure if this is what you're looking for, but if you are expecting the elements to be centered vertically you can use align-items-center class of Bootstrap since it uses flexbox on its rows

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-9">
      <div class="form-group">
        <div class="row align-items-center">
          <label for="phonenum" class="col-sm-2">Enter your phone number</label>
          <div class="col-sm-10">
            <input type="text" name="phonenum" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Exactly what I was looking for, thanks! – user13286 Jan 28 '19 at 21:07 — user13286, Jan 28 '19 at 21:07

Can't get input to align vertically center within Bootstrap 4 column

1 Answers1