vertical align button in a row

Question

I am trying to vertically align a button within a row (bootstrap). I can't get it to work out... any tips?

<div class="form-group row">
    <div class="col-sm-6">
        <input class="form-control" name="new-project" value="" placeholder="Type project name"></input>
    </div>
    <div class="col-sm-2">
        <button type="button" class="btn btn-sm" style="position: absolute; vertical-align: middle">Save</button>
    </div>
</div>

Use `block: inline-block` As vertical-align only applies to inline or table elements. See: https://developer.mozilla.org/en/docs/Web/CSS/vertical-align — Ignacy Debicki, Jan 09 '16 at 19:25
Ah yes sorry was typing it of the top of my head. Good point — Ignacy Debicki, Jan 09 '16 at 19:30

score 0 · Answer 1 · answered Jan 09 '16 at 19:28

Since you're using a small button you should also use a small input. Using an input-group is also an option.

See example Snippet at FullPage.

body {
  padding-top: 50px;
}
.red {
  background: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="form-group">
      <div class="col-sm-6 col-sm-offset-2 red">
        <input class="form-control input-sm" name="new-project" value="" placeholder="Type project name" />
      </div>
      <div class="col-sm-2 red">
        <button type="button" class="btn btn-sm">Save</button>
      </div>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <div class="row">
    <div class="form-group">
      <div class="col-sm-8 col-sm-offset-2 red">
        <div class="input-group">
          <input class="form-control input-sm" name="new-project" value="" placeholder="Type project name" />
          <span class="input-group-btn">
        <button type="button" class="btn btn-sm">Save</button>
      </span>
        </div>
      </div>
    </div>
  </div>
</div>

vertical align button in a row

1 Answers1