Place form at center of page using bootstrap - css

Question

I have a bootstrap login form appearing at the top centered page but i need it to present at the center of page.
<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>
How can i center this form to a page using bootstrap/angularjs?

Answer 1

By default bootstrap has no tools to vertical centering.
For a login page you can just add this absolute centering :
.perfect-centering {
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}
Maybe it will be include as mixin in Bootstrap 4 ... But for now, you have to use additional styles,
I think.

Answer 2

I added just a div outside yours 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>
also a new css class defined as :
.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 in local your bootstrap file just add this class without create other files, if you link to bootstrap tou can maybe add a div with style, like :
<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>
instant of center class

Answer 3

Here is a solution without absolute positioning using view-height. It will probably retain the responsive width of the form.
CSS
/* body {height:100vh;} */ /* if needed */
.full-height {height:100vh;background-color:yellow;}/* 100% of the view-height */
.form-height {margin-top:-130px;}/* minus half the form-height */
.form-v-middle {margin-top:50vh;}/* half the 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>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>
Example:
http://www.bootply.com/2wtIZimo3W
vh browser support:
http://caniuse.com/#search=vh