Bootstrap 4 - can't horizontally align a vertical form - html

Question

I have the following form code:
<div id="site" class="container-fluid">
<div class="row">
<div class="my-4 offset-3 col-6 justify-content-center align-items-center">
<form action="/some/path" method="post">
<div class="form-group row">
<label for="username" class="col-2 col-form-label">Username</label>
<div class="col-4">
<input type="text" class="form-control" id="username" name="_username" required="required" autocomplete="username" />
</div>
</div>
<div class="form-group row">
<label for="password" class="col-2 col-form-label">Password</label>
<div class="col-4">
<input type="password" class="form-control" id="password" name="_password" required="required" autocomplete="current-password" />
</div>
</div>
<div class="form-group row">
<div class="col-2"></div>
<div class="col-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="remember_me" name="_remember_me" value="on" />
<label for="remember_me" class="form-check-label">Remember me</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-6">
<button class="btn btn-burnt-orange" type="submit" id="_submit" name="_submit">Log in</button>
</div>
</div>
</form>
</div>
</div>
</div>
I want the form to be centered on the page, but instead, it's still further to the left than center as shown by this screenshot:
I thought my math was correct: Bootstrap uses a 12-column grid, so by using a 3-column offset, and a 6-column content area, I'd have essentially two 3-column gutters on each side. And by specifying the form rows to add up to 6-columns (2-column labels and 4-column inputs), the form would fill the 6-column content area, thereby automatically centering itself. But I'm obviously wrong.
So, what can I do to actually center this thing? And to make it 6 columns wide (because, judging by the screenshot, it isn't)?

Answer 1

The form is horizontally centered, but it's only half the width of it's parent. The issue is...
"And by specifying the form rows to add up to 6-columns (2-column
labels and 4-column inputs), the form would fill the 6-column content
area, thereby automatically centering itself"
Since 6 is half of 12, the form col-6 (2+4) is only going to fill half the parent col-6. If you want a narrower form in the middle use col-4 (1/3 width), and then something that adds to 12 for the labels and form input (eg. 3+9). OFC you could also use 4/8, 6/6, etc...
<div class="container-fluid">
<div class="row">
<div class="my-4 offset-4 col-4 justify-content-center align-items-center">
<form action="/some/path" method="post">
<div class="form-group row">
<label for="username" class="col-3 col-form-label">Username</label>
<div class="col-9">
<input type="text" class="form-control" id="username" name="_username" required="required" autocomplete="username">
</div>
</div>
<div class="form-group row">
<label for="password" class="col-3 col-form-label">Password</label>
<div class="col-9">
<input type="password" class="form-control" id="password" name="_password" required="required" autocomplete="current-password">
</div>
</div>
<div class="form-group row">
<div class="col-3"></div>
<div class="col-9">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="remember_me" name="_remember_me" value="on">
<label for="remember_me" class="form-check-label">Remember me</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-12">
<button class="btn btn-burnt-orange" type="submit" id="_submit" name="_submit">Log in</button>
</div>
</div>
</form>
</div>
</div>
</div>
https://www.codeply.com/go/b4FE5qflxS
Related: Center the content inside a column in Bootstrap 4

Answer 2

You can accomplish this by using col-6 and justify-content-center. All you have to do is setup the elements, rows and columns with bootstrap.
Here is an example of centering the form group:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="site" class="container-fluid">
<div class="row justify-content-center">
<div class="col-6" style="background: #eee;">
<!-- formgroup start -->
<form>
<div action="/some/path" class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" placeholder="Enter username" name="_username" required="required" autocomplete="username" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password" name="_password" required="required" autocomplete="current-password" />
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="remember_me" name="_remember_me" value="on" />
<label class="form-check-label" for="remember_me">Remember me</label>
</div>
<button type="submit" class="btn btn-primary" id="_submit" name="_submit">Submit</button>
</form>
<!-- formgroup end -->
</div>
</div>
</div>
Reference these pages on the Bootstrap 4 documentation
https://getbootstrap.com/docs/4.1/layout/grid/
https://getbootstrap.com/docs/4.1/components/forms/