Multiple horizontal nested form-rows - css

Question

I'm using Bootstrap 4.0 beta 2 and try to align label and form control horizontal in one line by using form-row and col-* classes.
Now I'm trying to align two of these form-row structs in one line, see fiddle (use HD resolution when running). But I don't know why the first input in first row is not vertically aligned with input field of second row. I've struggled for some hours now and using different classes form-inline, row, and so one and tried to play with margin and padding classes, but no luck.
The DOM cannot be changed, only the classes applied. Who can help me?

Answer 1

The problem is that your first column additionally has form-row on it, creating a row inside another row. There should never be a row inside a row; only use columns inside of rows. These rows add additional padding (15px for row, and 5px for form-row), which interferes with the percentage-based widths and offsets when you nest them.
Instead of nesting your second label + div inside of a new form-row, you need to take it out of its form-row, and place it inside of the form-row of the first label + div. After this, you'll need to adjust the col-md counts of both label+ div combinations to suit.
I've gone with 2 and 3 respectively, as that comes to a grand total of 10 ((2 + 3) + (2 + 3)), which equals the total of your second row (2 + 8).
I've created a fiddle showcasing this here, and you can also see this by maximising the snippet below:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<fieldset>
<div class="form-row">
<label class="col-form-label col-md-2 col-sm-12">LABEL</label>
<div class="col-md-3 col-sm-12">
<input type="text" class="form-control">
</div>
<label class="col-form-label col-md-2 col-sm-12">LABEL</label>
<div class="col-md-3 col-sm-12">
<input type="text" class="form-control">
</div>
</div>
<div class="form-row mt-2">
<label class="col-form-label col-md-2 col-sm-12">LABEL</label>
<div class="col-md-8 col-sm-12">
<input type="text" class="form-control">
</div>
</div>
</fieldset>
</form>
Hope this helps! :)
CSS Only Solution:
Assuming you can't modify the DOM, you can always fall back to CSS:
.form-row.mt-2 {
width: 100%;
}
#media screen and (min-width: 768px) {
.form-row.mt-2>div {
padding-left: 4px;
padding-right: 13px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<form>
<fieldset>
<div class="form-row">
<div class="form-row col-md-6 col-sm-12">
<label class="col-form-label col-md-4 col-sm-12">LABEL</label>
<div class="col-md-4 col-sm-12">
<input type="text" class="form-control">
</div>
</div>
<div class="form-row col-md-6 col-sm-12">
<label class="col-form-label col-md-4 col-sm-12">LABEL</label>
<div class="col-md-4 col-sm-12">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="form-row mt-2">
<label class="col-form-label col-md-2 col-sm-12">LABEL</label>
<div class="col-md-8 col-sm-12">
<input type="text" class="form-control">
</div>
</div>
</fieldset>
</form>
Though again, the DOM modification would be the more preferable solution :)

Answer 2

Check the snippet.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
<form class="col-12">
<div class="form-row">
<div class="col-md-6 col-12">
<div class="form-row">
<label class="col-form-label col-md-4 col-12">LABEL</label>
<div class="col-md-8 col-12">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-md-6 col-12">
<div class="form-row">
<label class="col-form-label col-md-4 col-12">LABEL</label>
<div class="col-md-8 col-12">
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
<div class="form-row align-items-center mt-2">
<label class="col-form-label col-md-2 col-12">LABEL</label>
<div class="col-md-10 col-12">
<input type="text" class="form-control">
</div>
</div>
</form>