The code below showcases my current setup:
<form>
<div class="row">
<div class="col-md-8">
<label class="sr-only" for="first-name">First name</label>
<input type="text" class="form-control mr-2" id="first-name" name="first_name" required>
</div>
</div>
<div class="row">
<div class="col-md-8">
<label class="sr-only" for="last-name">Last Name</label>
<input type="text" class="form-control mr-2" id="last-name" name="last_name" required>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-success">
Submit
</button>
</div>
</div>
</form>
For mobile devices, the layout appears as shown in the following image: https://i.sstatic.net/HnUuC.png
My attempts to improve alignment include adding col-md-offset-4 to the input divs.
Additionally, I tried using justify-content-center on the divs.
On desktop, I want the alignment to resemble the layout in this image, hence why I dynamically apply the class form-inline on larger resolutions:
https://i.sstatic.net/8l8ed.png
How can I center align these elements with the submit button on mobile while maintaining the desired desktop layout?