Multiple form-groups on single row in Bootstrap 4 - html

Question

Does anyone know if this kind of thing is possible?
I've tried using inline-group and form-inline but then it doesn't seem to conform to fit the full grid width.
Whereas form-horizontal seems to expect the entire form on one row.
This code creates the desired output (two form controls on one row) but form-groups are required around each one for viewing in sm mode.
NB: This is for a 16 col grid.
<form>
<div className="form-group row">
<!--form group needed here -->
<label className="col-form-label col-md-2" htmlFor="formGroupExampleInput">First Name*</label>
<div className="col-md-5">
<input type="text" className="form-control" id="formGroupExampleInput" placeholder="Example input" />
</div>
<!--form group needed here -->
<label className="offset-md-2 col-form-label col-md-2" htmlFor="formGroupExampleInput">Last Name*</label>
<div className="col-md-5">
<input type="text" className="form-control" id="formGroupExampleInput" placeholder="Example input" />
</div>
</div>
</form>
I don't think this is a duplicate of:
Bootstrap 3: How to get two form inputs on one line and other inputs on individual lines?
...because this isn't leaving me with full control of grid columns within via form labels etc.

Answer 1

Place your form-groups into .col-* containers to align the groups in a horizontal layout, for example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form>
<div class="col-xs-6 form-group">
<label for="inputEmail3" class="control-label">Email</label>
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
<div class="col-xs-6 form-group">
<label for="inputPassword3" class="control-label">Password</label>
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</form>
If controls of a form group should be aligned in a horizontal layout too, use .form-horizontal class for the form. In this case .form-groups behaves as grid rows. Thus, it is possible to apply Nesting columns template for your form:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form class="form-horizontal">
<div class="col-xs-6">
<div class="form-group">
<label for="inputEmail3" class="col-xs-3 control-label">Email</label>
<div class="col-xs-9">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="inputPassword3" class="col-xs-4 control-label">Password</label>
<div class="col-xs-8"><input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
</div>
</form>

Answer 2

My bad, I just hadn't understood nested rows properly:
https://v4-alpha.getbootstrap.com/layout/grid/#nesting
This works fine:
<form>
<div class="row">
<div class="col-md-8">
<div class="form-group row">
<label class="col-form-label col-md-4" for="formGroupExampleInput">First Name*</label>
<div class="col-md-10">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" />
</div>
</div>
</div>
<div class="col-md-8">
<div class="form-group row">
<label class="offset-md-2 col-form-label col-md-4" for="formGroupExampleInput">Last Name*</label>
<div class="col-md-10">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" />
</div>
</div>
</div>
</div>
</form>