Centering Login Form Bootstrap - css

Question

I'm having some trouble centering my Bootstrap login form.
Centering
I've tried many different ways of centering the form. The whole div is centered with the col-md-offset class, but I don't understand how to make the content (the form inputs) center in the div itself. For the text I know you can use text align, and for content I usually use margin: 0, auto;, but that isn't working for the form.
I also want to center it vertically, if possible, but given what I have researched on the internet, it seems very difficult to do so, and there is nothing I've found in the bootstrap references explaining how to do so.
Another random question, is why on the form are the left corners right angles whereas the right corners are rounded? Even when I change the corner-radius it only effects the right corners.
CODE:
http://jsbin.com/gamufagehu/edit?html

Answer 1

If you want to place the form in the center of the screen then use position: absolute and don't use the grid. You can use media queries to control other factors depending on what you ultimately want on smaller or larger viewports.
Also, you're use of input-group (Docs) doesn't really make sense and is the reason you're having adverse styling on your inputs (one being shorter than the other and the border-radius). Use form-group instead.
.myForm {
min-width: 500px;
position: absolute;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2.5rem
}
#media (max-width: 500px) {
.myForm {
min-width: 90%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" id="logoText">Test</a>
</div>
<div class="collapse navbar-collapse">
<form class="navbar-form navbar-right" method="post">
<div class="form-group">
<input type="email" class="form-control" name="loginemail" id="loginemail" placeholder="email" />
</div>
<div class="form-group">
<input type="password" class="form-control" name="loginpassword" placeholder="password" />
</div>
<input type="submit" name="submit" class="btn btn-default" value="Log In" />
</form>
</div>
</div>
</div>
<div class="container">
<form class="myForm" method="post">
<div class="form-group">
<label for="email">Email</label>
<input class="form-control input-lg" type="email" name="email" id="email" placeholder="email" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control input-lg" type="password" name="password" placeholder="password" />
</div>
<div class="form-group">
<input type="submit" name="submit" class="btn btn-success btn-lg" value="Sign Up" />
</div>
</form>
</div>

Answer 2

you can use
.input-group{
margin:0px auto;
}
here is a bin working fine with same rules.
the reason you input box has right-top and right-bottom radius but not the left-top and left-right is that it is excepting something on the left of it, like some button or something, let me throw a link to make it understand better. go to amount field on this link. we can always overwrite the bootstrap rules but it is not recommended when there is a problem with use of classes, good luck.
well well well, sorry for frequent edits, but check out the use of .input-group class, i guess you messed it up there

Answer 3

I would recommend using column layout in a proper way.
You could wrap your login elements in divs that are based on column layout grid with length 4 and offset equal 4 too. You would get elements centered on the page and fully responsible. Then you could style elements inside them as in normal form groups.
I'd also recommend not using input groups as they are designed to group inputs as the name suggests and this is the reason you have square corners on left side of the inputs (for other inputs on left to seamlessly integrate into one input group) :)
Just put every form row inside that structure:
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="input-group">(...)</div>
</div>
</div>
Look here:
JSBin example
Good note for future use of any library, including bootstrap - it is a good way to read all examples of use of particular library and its documentation, because otherwise you could end up overwriting functionalities that are already provided within it :)

Answer 4

You can use this:
.input-group {
position: relative;
border-collapse: separate;
display: block;
}