Arie S.
Arie S.

Reputation: 63

Bootstrap 3 form-horizontal with two-line label

How can I align vertically a label and an input when the label take two lines ?

Here is my code:

<form class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-sm-3" for="passwd_confirm">Confirmation du mot de passe:</label>
    <div class="col-sm-9">
      <input type="password" class="form-control" id="passwd_confirm" maxlength="32">
    </div>
  </div>
<form>

The default display is that the input and the first line of the label have the same baseline but I want to align the input with the vertical center of the label.

How can I do this ?

Thanks.

Upvotes: 1

Views: 1777

Answers (1)

Michael Coker
Michael Coker

Reputation: 53684

If you're using bootstrap3, you could add a class to the parent that makes it a flex row, then use align-items: center to center vertically. You might also want to match the default padding-top: 7px value for the .control-label element by either removing that padding, or adding that to the right column/input as a padding or margin, depending on the rest of your layout.

.form-group.valign {
  display: flex;
  align-items: center;
}

@media (min-width: 768px) {
  .valign input {
    margin-top: 7px;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-horizontal">
  <div class="form-group valign">
    <label class="control-label col-sm-3" for="passwd_confirm">Confirmation du mot<br> de passe:</label>
    <div class="col-sm-9">
      <input type="password" class="form-control" id="passwd_confirm" maxlength="32">
    </div>
  </div>
<form>

Upvotes: 2

Related Questions