Struggling to align a vertical form horizontally in Bootstrap 4?

Question

Struggling to align a vertical form horizontally in Bootstrap 4?

This code snippet shows the form I am working with:

<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've been trying to center this form on the page using Bootstrap, but currently it is not centered as expected, as seen in this screenshot:

https://i.sstatic.net/BUar8.jpg

I initially calculated the grid columns correctly, with a 3-column offset and 6-column content area, anticipating the form to center due to the combined 6-column width of form rows. However, the result is not as intended.

How can I correct this and ensure the form is both centered and 6 columns wide as desired?

html css bootstrap-4

Answer 1

Answer №1

The alignment of the form has been adjusted to be horizontally centered, however, it appears to only occupy half of its parent's width. This is due to...

"By setting the form rows to a total of 6-columns (2-column labels and 4-column inputs), the form will fill the 6-column content area, automatically centering itself."

With the number 6 representing half of 12, the form col-6 (2+4) will only take up half of the parent col-6. To achieve a narrower form in the center, you can utilize col-4 (1/3 width) and pair it with elements that add up to 12 for the labels and form input (e.g., 3+9). Alternatively, you can use other combinations like 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>

Related: Center the content inside a column in Bootstrap 4

Answer 2

The alignment of the form has been adjusted to be horizontally centered, however, it appears to only occupy half of its parent's width. This is due to...

"By setting the form rows to a total of 6-columns (2-column labels and 4-column inputs), the form will fill the 6-column content area, automatically centering itself."

With the number 6 representing half of 12, the form col-6 (2+4) will only take up half of the parent col-6. To achieve a narrower form in the center, you can utilize col-4 (1/3 width) and pair it with elements that add up to 12 for the labels and form input (e.g., 3+9). Alternatively, you can use other combinations like 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>

Related: Center the content inside a column in Bootstrap 4

Answer 3

Answer №2

To achieve this, you can utilize the col-6 class and justify-content-center in Bootstrap. Simply structure your elements, rows, and columns with Bootstrap to center the form group. Here is a sample code snippet for 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>

For further information, refer to the following pages in the Bootstrap 4 documentation:

Answer 4

To achieve this, you can utilize the col-6 class and justify-content-center in Bootstrap. Simply structure your elements, rows, and columns with Bootstrap to center the form group. Here is a sample code snippet for 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>

For further information, refer to the following pages in the Bootstrap 4 documentation:

Struggling to align a vertical form horizontally in Bootstrap 4?

Answer №1

Answer №2

Similar questions

"Help needed: The HTML dialog element is obstructing the invisible reCAPTCHA challenge popup. Any solutions for resolving this

Performing a dynamic animation by toggling the class of an element with "classList.toggle" in JavaScript

What are the best methods for utilizing scrollbars to navigate a virtual canvas?

Toggling a div updates the content of a different div

How can I selectively import the "reboot.scss" file from bootstrap using npm in my project?

Tips for sending php data to javascript efficiently

Guide on breaking up a string into separate lines

Arranging an image next to a text input in Bootstrap 5: A step-by-step guide

Stylized search input inspired by Pinterest with a bubbly design

How can I position an element at the bottom of a page using VueJS and Bootstrap CSS?

Playing only audio and no video in an Android WebView using HTML5

What is the best way to apply a top padding to a background image using CSS?

Is it possible to obtain the index of a table row using querySelector?

Steps for accessing an image from the static folder in a Python-Django application

Tips for inserting an HTML tag within an object

What steps should I take to effectively configure the header cache on my website?

Guide to setting up collapsible sections within a parent collapsible

Struggling to remove the translucent effect when hovering over the share button

Adjusting jQuery Button Width with input type of "button"

"Revealing the specific row and column of the selected element in each table when hovering over it