Centering Login Form Bootstrap

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>