Keep bootstrap input fields in line - html

Question

I am struggling with his problem, I have 4 input fields which should appear in a single line. Each field also has a label and the text length of this label can vary.
Simplified version of my problem
<div class="container">
<div class="row">
<div class="col-md-3">
<label>text</label>
<input class="form-control">
</div>
<div class="col-md-3">
<label>text</label>
<input class="form-control">
</div>
<div class="col-md-3">
<label>text</label>
<input class="form-control">
</div>
<div class="col-md-3">
<label>text text text text text text text text text text text text text text text text text text text</label>
<input class="form-control">
</div>
</div>
</div>
JSFiddle (you probably have to resize the width of the output, otherwise bootstrap will show it vertically)
As you can see here the last input field is not in line with the other ones because the text of the label takes 2 lines. Is there a way to fix this?

Answer 1

You need form-group inside col-md-12 container
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-3">
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</div>
<div class="col-xs-12 col-md-3">
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</div>
<div class="col-xs-12 col-md-3">
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</div>
<div class="col-xs-12 col-md-3">
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</div>
</div>
</div>
col-xs-12 is optional.https://jsfiddle.net/vladavip88/qfdbg022/

Answer 2

Set the label height in a media query;
#media(min-width:992px){ /* default bootstrap md width */
label {
min-height:70px; /* adjust as appropriate */
}
}
The example above will give label elements a height of 70px when the page's width is >= 992px
https://jsfiddle.net/ue7bn8qd/12/

Answer 3

There are Two css properties in form-control class.
display: block;
width: 100%;
due to these properties input fields are behaving like block. That's why they are not inline. Edit these 2 properties to get your input fields inline.