Bootstrap 4 form-group with two pairs of labels and inputs per row

Question

Codepen here .

The first form has two pairs of labels & elements laid out on the same row.

What I would like to do is to nest each pair of <label> and <div> in their own containers: div.myFormColumnLeft and div.myFormColumnRight .

The problem is that labels and elements in FORM2 are no longer on the same line.

QUESTION . Is there a way to make FORM2 look exactly like FORM1 with a slightly different markup?

Answer 1

Adding the d-flex class to the columns would do the trick in this case:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="container-fluid"> <b>FORM1:</b> <form> <div class="form-group row"> <!-- Left column --> <label class="col-sm-2 col-form-label">Email</label> <div class="col-sm-4"> <input type="email" class="form-control"> </div> <!-- Right column --> <label class="col-sm-2 col-form-label">Password</label> <div class="col-sm-4"> <input type="password" class="form-control"> </div> </div> </form> <hr /> <b>FORM2:</b> <form> <div class="form-group row"> <!-- Left column --> <div class="myFormColumnLeft col-md-6 d-flex"> <label class="col-sm-4 col-form-label">Email</label> <div class="col-sm-8"> <input type="email" class="form-control"> </div> </div> <!-- Right column --> <div class="myFormColumnRight col-md-6 d-flex"> <label class="col-sm-4 col-form-label">Password</label> <div class="col-sm-8"> <input type="password" class="form-control"> </div> </div> </div> </form> </div> 

Reference:

https://getbootstrap.com/docs/4.0/utilities/flex/#enable-flex-behaviors