Bootstrap 4 - can't horizontally align a vertical form

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)?

Use m-auto and col-6. If not resolve share your live example. — Aman, Dec 06 '18 at 03:02

score 1 · Accepted Answer · answered Dec 06 '18 at 10:34

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

Ah, so the 12-column layout is based on the parent element. So if a column has a width of `col-6`, that is essentially the width of the full 12 columns for any rows within. Good to know! — Major Productions, Dec 06 '18 at 19:02

score 0 · Answer 2 · answered Dec 06 '18 at 04:03

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

Bootstrap 4 - can't horizontally align a vertical form

2 Answers2