Search code examples
formstwitter-bootstrapvertical-alignmentvalign

Bootstrap: Vertically center label in form-group

I have a form-group inside a horizontal form. In this form-group, the right element is higher than the left one. For this reason, I want to center the left element vertically in its row. For instance:

<form class="form-horizontal">
    <div class="form-group">
      <label for="inputEmail3" class="col-sm-2 control-label">Email1</label>
      <div class="col-sm-10"> <!-- higher element -->
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        <br>Random stuff
      </div>
    </div>
    <div class="form-group">
      <label for="inputEmail3" class="col-sm-2 control-label">Email2</label>
      <div class="col-sm-10"> 
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
      </div>
    </div>
</form>

Email1 is currently shown at the top of its own row as can be seen in this plunker snippet.

EDIT: So to clarify my intentions, this is the current state:

enter image description here

And this is what I would like to have (the blue area is the previously mentioned "row"):

enter image description here

Solution

  • If you are ready to drop support for some "old" browsers, you can use the flexbox features (see caniuse.com flex)

    <div class="form-group flex-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email1</label>
  <div class="col-sm-10">
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    <br>Random stuff
  </div>
</div>

    @media (min-width: 768px) {
  .flex-group {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
            align-items: center;
  }
  .form-horizontal .flex-group .control-label {
    padding-top: 0;
  }
}

    http://plnkr.co/edit/BQ6C4LGiL4oe1ZQTQ3Ys