Inline Bootstrap form layout with labels above inputs
For bootstrap v4 you can use d-flex flex-column
:
<div class="form-group col-md-4">
<div class="d-flex flex-column">
<label for="name" class="control-label">Line Height</label>
<input type="number" value='' class="form-control" id="lineHeight">
</div>
</div>
I think the simplest solution would be to add col-xs-4
to the class of each div. That will make sure the divs will be inline for the jsfiddle example. Additionally, you should close the form tag with </form>
.
<form>
<div class="form-group col-xs-4 col-md-4">
<label for="name" class="control-label">Line Height</label>
<input type="email" value='' class="form-control" id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-4 col-md-4">
<label for="name" class="control-label">Padding Top</label>
<input type="email" value='' class="form-control" id="name" placeholder="Ime">
</div>
<div class="form-group col-xs-4 col-md-4">
<label for="name" class="control-label">Padding Bottom</label>
<input type="email" value='' class="form-control" id="name" placeholder="Ime">
</div>
</form>
Replace <label>
tag with <div>
and it will line up on top perfectly.