Center the form on the page using Bootstrap

Question

Center the form on the page using Bootstrap

My bootstrap login form is currently appearing at the top of the page, but I want it to be centered.

<div class="container">
  <div class="row text-center">
    <div class="col-sm-6 col-sm-offset-3 well offset4">
      <div class="">
        <div class="text-warning">
          <h3>Login to our site</h3>
          <p>Enter your username and password to log in</p>
        </div>
      </div>
      <div class="">
        <form role="form" action="" method="post" class="">
          <div class="form-group">
            <label class="sr-only" for="form-username">Username</label>
            <input type="text" name="form-username" placeholder="Username..." class="form-control" id="form-username">
          </div>
          <div class="form-group">
            <label class="sr-only" for="form-password">Password</label>
            <input type="password" name="form-password" placeholder="Password..." class="form-control" id="form-password">
          </div>

          <button type="submit" class="btn btn-warning col-sm-12 mt-2"><strong>Sign in!</strong></button>
        </form>
      </div>
    </div>
  </div>
</div>

I'm looking for a way to center this form on the page using Bootstrap or AngularJS. Any suggestions would be appreciated!

css angularjs twitter-bootstrap twitter-bootstrap-3 bootstrap-modal

Answer 1

Answer №1

Vertical centering is not natively supported in Bootstrap by default.

If you want to center elements vertically on a login page, you can use this absolute positioning technique:

.perfect-centering {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
   }

It's possible that vertical centering functionality will be included as a mixin in Bootstrap 4 in the future. But for now, additional styles are needed.

Answer 2

Vertical centering is not natively supported in Bootstrap by default.

If you want to center elements vertically on a login page, you can use this absolute positioning technique:

.perfect-centering {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
   }

It's possible that vertical centering functionality will be included as a mixin in Bootstrap 4 in the future. But for now, additional styles are needed.

Answer 3

Answer №2

To enhance the layout, I included an additional div outside your existing container:

<div class="center">    
<div class="container">
                <div class="row">
                    <div class="col-sm-6 col-sm-offset-3 well offset4">
                        <div class="">
                            <div class="text-warning">
                                <h3>Login to our site</h3>
                                <p>Enter your username and password to log in</p>
                            </div>
                        </div>
                        <div class="">
                            <form role="form" action="" method="post" class="">
                                <div class="form-group">
                                    <label class="sr-only" for="form-username">Username</label>
                                    <input type="text" name="form-username" placeholder="Username..." class="form-control" id="form-username">
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="form-password">Password</label>
                                    <input type="password" name="form-password" placeholder="Password..." class="form-control" id="form-password">
                                </div>
                                <button type="submit" class="btn btn-warning col-sm-12"><strong>Sign in!</strong></button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
</div>

Furthermore, a new CSS class was introduced as follows:

.center{
  position:absolute;
  top:50%;
  left:50%;
  padding:10px;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  }

UPDATE: If you have your Bootstrap file locally, simply integrate this class without creating additional files. Alternatively, if you are linking to Bootstrap externally, you can apply the style directly within a div like so:

<div style=" position:absolute;
  top:50%;
  left:50%;
  padding:10px;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);">....</div>

You can use this inline styling instead of the center class.

Answer 4

To enhance the layout, I included an additional div outside your existing container:

<div class="center">    
<div class="container">
                <div class="row">
                    <div class="col-sm-6 col-sm-offset-3 well offset4">
                        <div class="">
                            <div class="text-warning">
                                <h3>Login to our site</h3>
                                <p>Enter your username and password to log in</p>
                            </div>
                        </div>
                        <div class="">
                            <form role="form" action="" method="post" class="">
                                <div class="form-group">
                                    <label class="sr-only" for="form-username">Username</label>
                                    <input type="text" name="form-username" placeholder="Username..." class="form-control" id="form-username">
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="form-password">Password</label>
                                    <input type="password" name="form-password" placeholder="Password..." class="form-control" id="form-password">
                                </div>
                                <button type="submit" class="btn btn-warning col-sm-12"><strong>Sign in!</strong></button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
</div>

Furthermore, a new CSS class was introduced as follows:

.center{
  position:absolute;
  top:50%;
  left:50%;
  padding:10px;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  }

UPDATE: If you have your Bootstrap file locally, simply integrate this class without creating additional files. Alternatively, if you are linking to Bootstrap externally, you can apply the style directly within a div like so:

<div style=" position:absolute;
  top:50%;
  left:50%;
  padding:10px;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);">....</div>

You can use this inline styling instead of the center class.

Answer 5

Answer №3

Here is a creative approach that avoids using absolute positioning and instead utilizes view-height units to maintain responsive width for the form.

CSS

/* body {height:100vh;} */ /* uncomment if necessary */
.full-height {height:100vh;background-color:yellow;} /* occupying 100% of the view-height */
.form-height {margin-top:-130px;} /* offsetting by half the form height */
.form-v-middle {margin-top:50vh;} /* aligning at center vertically based on view-height */

HTML

<div class="container full-height">
  <div class="row form-height">
    <div class="col-sm-6 col-sm-offset-3 well offset4 form-v-middle">
      <div class="">
        <div class="text-warning">
          <h3>Sign in to access our site</h3>
          <p>Provide your username and password to log in</p>
        </div>
      </div>
      <div class="">
        <form role="form" action="" method="post" class="">
          <div class="form-group">
            <label class="sr-only" for="form-username">Username</label>
            <input type="text" name="form-username" placeholder="Enter your Username..." class="form-control" id="form-username">
          </div>
          <div class="form-group">
            <label class="sr-only" for="form-password">Password</label>
            <input type="password" name="form-password" placeholder="Enter your Password..." class="form-control" id="form-password">
          </div>
          <button type="submit" class="btn btn-warning col-sm-12"><strong>Log In</strong></button>
        </form>
      </div>
    </div>
  </div>
</div>

Live Demo: View Demo

For information on browser support for view-height units, visit: Browser Support for vh Unit

Answer 6

Here is a creative approach that avoids using absolute positioning and instead utilizes view-height units to maintain responsive width for the form.

CSS

/* body {height:100vh;} */ /* uncomment if necessary */
.full-height {height:100vh;background-color:yellow;} /* occupying 100% of the view-height */
.form-height {margin-top:-130px;} /* offsetting by half the form height */
.form-v-middle {margin-top:50vh;} /* aligning at center vertically based on view-height */

HTML

<div class="container full-height">
  <div class="row form-height">
    <div class="col-sm-6 col-sm-offset-3 well offset4 form-v-middle">
      <div class="">
        <div class="text-warning">
          <h3>Sign in to access our site</h3>
          <p>Provide your username and password to log in</p>
        </div>
      </div>
      <div class="">
        <form role="form" action="" method="post" class="">
          <div class="form-group">
            <label class="sr-only" for="form-username">Username</label>
            <input type="text" name="form-username" placeholder="Enter your Username..." class="form-control" id="form-username">
          </div>
          <div class="form-group">
            <label class="sr-only" for="form-password">Password</label>
            <input type="password" name="form-password" placeholder="Enter your Password..." class="form-control" id="form-password">
          </div>
          <button type="submit" class="btn btn-warning col-sm-12"><strong>Log In</strong></button>
        </form>
      </div>
    </div>
  </div>
</div>

Live Demo: View Demo

For information on browser support for view-height units, visit: Browser Support for vh Unit

Center the form on the page using Bootstrap

Answer №1

Answer №2

Answer №3

Similar questions

Modify the colors of <a> elements with JavaScript

Opacity in text shadow effect using CSS

creating a vertical scroll bar for an HTML table's content

Is it possible to retrieve resolved parameters from a template-rendering function?

Exploring the world of using Bootstrap containers, rows, and columns

Counting the number of visible 'li' elements on a search list: A guide

IBM Watson Conversation and Angular Integration

tips for obtaining the highest value among multiple keys within an array

How to Customize the Menu Style in Your WordPress Theme

Utilizing ES6 syntax, the afterCellEdit event in gridApi is triggered when

Change the color of this element and input field background

Using a directive to insert HTML content from a separate file into a div element

Incorporating the use of font color in CSS styles and

ECONFLICT: No compatible version of angular-bootstrap was found during the installation of datetimepicker

Utilizing Multiple Carousels on a Single Bootstrap 5 Page

Incorporating a scrolling text box within an <aside> element set in a flex layout

A guide on setting option values using ng:Options

Struggling with overlaying Bootstrap modals on top of each other

Ensure that the image inside a resizable container maintains the correct aspect ratio

Angular's minimum date validation is not accurate for dates prior to the year 1901