twitter bootstrap centered login form - css

Question

im using twitter bootstrap 3 and trying to center login form.
Example is here http://jsfiddle.net/0y848kf8/.
form is like this
<div id="loginContainer" class="container">
<h2>Sign in</h2>
<form action="/www/sign/in" method="post" class="form-horizontal" id="frm-signInForm">
<div class="form-group"><label for="frm-signInForm-username" class=" control-label col-sm-2">Username:</label>
<div class="col-sm-5"><input type="text" name="username" id="frm-signInForm-username" required="" data-nette-rules="[{"op":":filled","msg":"Please enter your username."}]" value="" class="form-control"></div>
</div>
<div class="form-group"><label for="frm-signInForm-password" class=" control-label col-sm-2">Password:</label>
<div class="col-sm-5"><input type="password" name="password" id="frm-signInForm-password" required="" data-nette-rules="[{"op":":filled","msg":"Please enter your password."}]" class="form-control"></div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-5">
<input type="submit" name="send" id="frm-signInForm-send" value="Sign in" class="btn btn-default">
</div>
</div>
<div><input type="hidden" name="do" value="signInForm-submit"></div>
</form>
</div>
And im curious why pagination-center class not working on loginContainer and why form-groups have such big width. I thought that centering with bootstrap will be easy, but i must make some mistake.

Answer 1

Here is a basic use scenario to center the form using css media queries. You originally had div id="container-fluid" (you'll want class not id) which is a full-width container so you'll want div class="container" to utilize the bootstrap default css.
Let me know if this helps at all.
input[type="text"],
input[type="password"],
.form-control {
box-shadow: none;
padding: 4px 0px 0px 10px;
height: 40px;
width: 100%;
font-size: 16px;
color: #33342e;
border: 1px solid #1c1c1c;
border-radius: 1px;
line-height: 100%;
-webkit-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
}
#contact-form {
padding: 15px 350px;
color: #1c1c1c;
font-size: 16px;
}
.btn-submit {
color: #fff;
background-color: #1c1c1c;
border-color: #fff;
width: 100%;
height: 45px;
font-size: 20px;
font-weight: 500;
margin: 5px 0px;
}
.btn-submit:hover {
color: #F00;
background-color: #FFF;
border: 2px solid #1c1c1c;
}
#media (max-width: 992px) {
#contact-form {
padding: 15px 50px;
}
}
#media (max-width: 480px) {
#contact-form {
padding: 15px 0px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form id="contact-form" name="contact-form" class="contact-form">
<fieldset>
<div class="row">
<div class="col-lg-12 form-group">
<h2>Sign In</h2>
<label for="user">Username</label>
<input class="form-control" type="text" value="" name="user" placeholder="Username" aria-required="true" />
</div>
<div class="col-lg-12 form-group">
<label for="Password">Password</label>
<input class="fom-control" type="text" value="" name="password" placeholder="Password" aria-required="true" />
</div>
<div class="col-lg-12 form-group">
<input type="submit" class="btn btn-submit" />
</div>
</div>
<!--end row-->
</fieldset>
</form>
</div>

Answer 2

Try this
http://jsfiddle.net/scaisEdge/bhk7n3ar/
<div id="loginContainer" class="container">
<h2 class="text-center">Sign in</h2>
and change width of the field