Twitter Bootstrap - Vertically Align Input with Label Inside Control-Group

Twitter Bootstrap - Vertically align input with label inside control-group

How about overriding Bootstrap's styles and using display:inline-block; instead of floats for the positioning, then you can use vertical-align to center the label:

.form-horizontal .control-label {
    display: inline-block;
    vertical-align: middle;
    float: none;
}
.form-horizontal .controls {
    display: inline-block;
    margin-left: 20px;
}

Example fiddle

How to vertically align label and input in Bootstrap 3?

The problem is that your <label> is inside of an <h2> tag, and header tags have a margin set by the default stylesheet.

Bootstrap: Vertically center label in form-group

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

How to vertically align text field with it's label and button

At first some Bootstrap-Basics:

• your 'row-div' should be wrapped by a 'container-div'
• row and col-xx-x classes need to be on their own div-tags

---

as you can see at the example below, you could easily get this done using css.

• With display: flex; we get all elements of the form-group side by side.
• With white-space: nowrap we 'tell' the label to be shown as one-line only.
• Using the margin-tags we will get the elements to the right position.

To learn more take a look at the documentations of display, white-space and margin.

I think the usage of input-groups could be interesting, too. Feel free to ask per comment, if anything is unclear.

.form-group.flex {  display: flex;}
.form-group.flex label {  white-space: nowrap;  margin-top: 7px;}
.form-group.flex input {  margin: 0 7px;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">  <div class="row">    <div class="col-md-12">      <form class="form-inline pull-right">        <div class="form-group flex">          <label for="numberOfCopies">Number of copies</label>          <input size="1" type="text" class="form-control" id="numberOfCopies">          <button type="submit" class="btn btn-primary">Add</button>        </div>      </form>    </div>  </div></div>

Vertical alignment of form-controls with wrapping labels in a row with Bootstrap 4

You can use the new align-items-end class (Alignment)

<div class="row align-items-end">
    <div class="col-md-4 form-group">
        <div ><label>Short Label</label></div>
        <div ><input class="form-control" ></div>

    </div>

    <div class="col-md-4 form-group">
        <div ><label>This label is too long</label></div>
        <div ><input class="form-control" ></div>

    </div>

    <div class="col-md-4 form-group">
        <div ><label>Another label</label></div>
        <div ><input class="form-control" ></div>
    </div>
</div>

How can I align form-controls vertically when some of the labels span multiple lines?

Would is be an idea to use CSS Grid Layout? I striped of some of the elements to make the example more clear.

div.form-group {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
}

.g1 {
  grid-column: 1;
  grid-row: 1;
}

.g2 {
  grid-column: 1;
  grid-row: 2;
}

.g3 {
  grid-column: 2;
  grid-row: 1;
}

.g4 {
  grid-column: 2;
  grid-row: 2;
}

@media screen and (max-width: 500px) {
  .g3 {
    grid-column: 1;
    grid-row: 3;
  }
  .g4 {
    grid-column: 1;
    grid-row: 4;
  }
}

<div class="form-group">
  <label class="g1" for="one">Label one</label>
  <input class="g2 form-control" type="text" id="one">
  <label class="g3" for="two">Label two is a very long label that will span at least two lines and shift the input box down a bit and make this form look really weird. How do I fix this?</label>
  <input class="g4 form-control" type="text" id="two">
</div>

How to right align labels and input Twitter bootstrap?

You would make the elements inline-block and then give the input/select elements a width of something like 70%. The label elements should fill the remaining space, therefore give them a width of 30%. Add an optional padding-right value to the label element and align it to the right.

EXAMPLE HERE

.form-horizontal input, .form-horizontal select {
    display:inline-block;
    width:70%;
    padding-right:10px;
}
.form-horizontal label {
    display:inline-block;
    text-align:right;
    width:30%;
    padding-right:12px;
}

Unlike floating elements, it's worth noting that inline element respect the white-space in the markup. You would need to remove this to ensure that the calculations add up to 100%. See this answer.

---

Alternatively, instead of using custom CSS, you could also take advantage of some bootstrap classes..

Here is an example using the HTML you provided:

FULL SCREEN EXAMPLE HERE

<form class="form-horizontal" role="form">
   <div class="form-group">
      <label class="cinfo cinfo col-sm-2 control-label">Card Type </label>
      <div class="col-sm-6">
         <select ng-model="cardtype" ng-change="selectCardType(cardtype)" ng-options="c.type for c in card" class="ng-pristine ng-valid form-control"></select>
      </div>
   </div>
   <div class="form-group">
      <label class="cinfocinfo col-sm-2 control-label" >Card Number</label>
      <div class="col-sm-6">
         <input id="cardnumber" class="form-control" ng-model="MarvPayer.cardnumber"/>
      </div>
   </div>
   <div class="form-group">
      <label class="cinfo col-sm-2 control-label">First Name </label>
      <div class="col-sm-6">
         <input id="fname" class="form-control" ng-model="MarvPayer.fname"/>
      </div>
   </div>
</form>

---

Related Topics