How to Vertically Align Label and Input in Bootstrap 3

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 3, align label + input to left on small viewport without jumping to a new line

You can use Bootstrap 3 grid col-xs-** and you can adjust them as per your requirment

    .fix-pagination .pagination {      margin-top: -20px;      margin-bottom: -20px;    }    .red {      background-color: red;    }    .green {      background-color: green;    }

 <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"><div class="container">  <div class="row fix-pagination">    <div class="pull-left">      <p class="col-xs-3 form-control-static red">Ver:</p>      <p class="col-xs-9" style="padding-left:0px">        <select class=" form-control repsal-rows-per-page-select">          <option>20 registros</option>          <option>50 registros</option>          <option>100 registros</option>          <option>500 registros</option>        </select>      </p>    </div>    <div class="pull-right green">      <nav class="pull-right" aria-label="Page navigation">        <ul class="pagination">          <li>            <a href="#" aria-label="Previous">              <span aria-hidden="true">«</span>            </a>          </li>          <li><a href="#">1</a></li>          <li><a href="#">2</a></li>          <li><a href="#">3</a></li>          <li><a href="#">4</a></li>          <li><a href="#">5</a></li>          <li>            <a href="#" aria-label="Next">              <span aria-hidden="true">»</span>            </a>          </li>        </ul>      </nav>    </div>  </div>
</div><!-- /container -->

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>

How to vertically align input fields that has different length of labels in bootstrap 4.3.1?

You can use min width

.input-group-text{   min-width:120px;}

<!doctype html><html>
  <head>    <meta charset="utf-8">    <title>Bootstrap Example</title>  </head>
  <body>    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <div class="container">      <div class="row">        <div class="col">          <div class="input-group mb-3">            <div class="input-group-prepend">              <span class="input-group-text" id="inputGroup-sizing-default">First Field</span>            </div>            <input type="text" class="form-control" aria-label="First Field" aria-describedby="inputGroup-sizing-default">          </div>
          <div class="input-group mb-3">            <div class="input-group-prepend">              <span class="input-group-text" id="inputGroup-sizing-default">Second Field</span>            </div>            <input type="text" class="form-control" aria-label="Second Field" aria-describedby="inputGroup-sizing-default">          </div>        </div>      </div>    </div>  </body>
</html>

Bootstrap 4 vertical center text inside horizontal form row

use align-self-center to align vertically

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10 align-self-center ">
     Password goes here
    </div>
  </div> 
</form>

Ref:https://getbootstrap.com/docs/4.3/utilities/flex/#align-self

Demo:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<form>  <div class="form-group row">    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>    <div class="col-sm-10">      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">    </div>  </div>  <div class="form-group row">    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>    <div class="col-sm-10 align-self-center ">     Password goes here    </div>  </div> </form>