Search code examples
htmlcsstwitter-bootstrapvertical-alignment

How do i vertically align my form in bootstrap?

Dear stackoverflow users,

I am trying to make a simple site with only a register and login page to learn how to make a register and login system using php. Bootstrap is the css library I use to do the design of the website. I need to vertically align my login form but the css property vertical-align: middle; along with display: inline-block; doesn't seem to work. It only moves the form to the left which I don't want. It is already centered horizontally, I just need it to be centered vertically too. Is there anything I can do to get the right result?

Here's my html code:

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Website - Login</title>
      <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
      <link href="css/loginstyle.css" rel="stylesheet">
  </head>
    <body>

      <nav class="navbar navbar-default">
        <div class="container">
          <div class="navbar-header">
            <a class="navbar-brand" href="index.html">Brand</a>
          </div>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="register.html">Register</a></li>
            <li><a href="#">Log in</a></li>
          </ul>
        </div>
      </nav>

      <div id="loginform" class="container">
        <div class="form">
          <h1 class="text-center">Login</h1>
          <br>
          <form>
            <div class="form-group">
              <label for="emailAddress">Email address:</label>
              <input type="email" class="form-control" id="emailAddress" placeholder="Email">
            </div>

            <div class="form-group">
              <label for="password">Password:</label>
              <input type="password" class="form-control" id="password" placeholder="Password">
            </div>

            <button type="submit" class="btn btn-default">Submit</button>
            <a class="btn btn-default pull-right" href="index.html">Cancel</a>
          </form>
        </div>
      </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>

And here's my css code:

#loginform {
    max-width: 500px;
    display: inline-block;
    vertical-align: middle;
}
Solution

  • I suggest to use an offset approach for centering the form horizontally.

    <div class="container">
  <div class="row">
    <div class="col-sm-6 col-sm-offset-3">

    <!-- the form content -->

    </div>
  </div>
</div>

    DEMO using your form

    More centering examples for Bootstrap

    For centering the box vertically: http://jsfiddle.net/x1cg15e3/

    This is an display:table approach, where the row is a table cell getting vertically aligned.