Bootstrap: Vertically center label in form-group

Question

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

So you want the `label` to appear right on the left of the `input` field regarding the size of the screen? Correct me if Im wrong? — jofftiquez, May 04 '15 at 09:35
Actually, this is what already happens. Instead, the `label` should appear right between the `input` and the text `Random stuff`. — Bastian, May 04 '15 at 09:38
Im working on this now, but just a request could you supply a picture at least a rough drawing of what you want to appear? Thanks. — jofftiquez, May 04 '15 at 09:46
According to the link you provided the left element you are referring was the `label` if you expand the window it appears on the left of the the `input`. This part is not very clear if you will ask me. **I want to center the left element vertically in terms of the whole row** How do you exactly want it to appear? Your question is unclear. Please provide a picture or rewrite your question so I could help you. — jofftiquez, May 04 '15 at 10:03
Thank you for editing the question. Does this have to go for both `input`? — jofftiquez, May 06 '15 at 04:09
Also Im curious, why do you exactly want it to be this way? Coz in my opinion its not a very neat way to create a `form` — jofftiquez, May 06 '15 at 04:11

score 14 · Accepted Answer · answered May 10 '15 at 16:25

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

This is the first thing that actually worked for me after looking at a bunch of similar questions. Thanks Sherbrow — Katie, Feb 06 '18 at 19:21

score 2 · Answer 2 · answered May 10 '15 at 07:26

You could just set the line-height equal to the height using CSS. Also, don't repeat domain IDs, you can only use id="inputEmail3" once. I changed both IDs to fit the text.

CSS

label[for="inputEmail3"]{
    height: 74px;
    line-height: 74px;
}

HTML

<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="inputEmail1" 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="inputEmail2" placeholder="Email">
      </div>
    </div>
</form>

score 0 · Answer 3 · answered May 05 '15 at 21:38

If you just want label1 to drop down as in your image, can't you just add a class giving it some padding-top? Like in this jsfiddle

Not clear on whether you want all dropped down or just label1.

CSS

.label1{padding-top:35px !important}

HTML

<form class="form-horizontal">
<div class="form-group">
  <label for="inputEmail3" class="label1 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>

score 0 · Answer 4 · answered May 06 '15 at 12:21

0

You can do this:

.form-horizontal .form-group {
    transform-style: preserve-3d;
}
.form-horizontal .vertically-aligned-label {
    position: relative;
    top: 50%;
    transform: translateY(50%);
}

answered May 06 '15 at 12:21

Loqman

1,487
1
12
24

AngularJR · Answer 5 · 2015-05-11T06:16:38.817

You will also need to control this if viewed on a small device, as the label will be on top of the input.

I have added some more bootstrap to cover this for you.

See in this Fiddle.

<div class="container block ">

<div class="col-md-6 col-md-offset-3 col-sm-7 col-sm-offset-2 col-xs-11 col-xs-offset-0">    
<form class="form-horizontal">
    <div class="row block bg-info form-group">
    <label for="inputEmail3" class="label1 col-sm-2 col-xs-2 control-label">Email1</label>
        <div class="col-md-8 col-sm-9 col-xs-9 col-xs-push-1"> <!-- higher element -->
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        <br>Random stuff
        <br>Random stuff 
        <br>Random stuff  
        </div>
    </div>
    <div class="row block bg-info form-group">
    <label for="inputEmail3" class="label2 col-sm-2 col-xs-2 control-label">Email2</label>
        <div class="col-md-8 col-sm-9 col-xs-9 col-xs-push-1"> 
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        </div>
        </div>
</form> 
</div>
</div>

enter image description here

Bootstrap: Vertically center label in form-group

5 Answers5