Here is the code of a login form on which I'm working on:
<main>
<div class="container-fluid">
<div class="row d-flex justify-content-center align-items-center">
<div class="col-6">
<h3 class="display-3">Sign In<h3>
<form class="justify-content-md-center">
<div class="col-md-auto">
<input type="text" required placeholder=" Username"
style="font-family:Arial, FontAwesome">
</div>
<div class="col-md-auto">
<input class="margin-25px" type="password" requires
placeholder=" Password"
style="font-family:Arial, FontAwesome">
</div>
<div class="container-fluid row justify-content-md-center">
<div class="col-sm">
<img class="icon" src="images/check-box.svg"
alt="check-box">
</div>
<div class="col-auto">
<p>Forgot your password?</p>
</div>
</div>
<button class="login__button btn btn-primary" type="submit">
LOGIN
</button>
</form>
</div>
</div>
</div>
</main>
I tried to do the layout with bootstrap grid, but can't find how to nest these two object, which are image with the class icon and the paragraph.
how it looks in chrome
You may use the following lines:
#login .container #login-row #login-column #login-box {
margin-top: 120px;
max-width: 600px;
height: 320px;
border: 1px solid #9C9C9C;
background-color: #EAEAEA;
}
#login .container #login-row #login-column #login-box #login-form {
padding: 20px;
}
#login .container #login-row #login-column #login-box #login-form #register-link {
margin-top: -85px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<div id="login">
<h3 class="text-center text-white pt-5">Login form</h3>
<div class="container">
<div id="login-row" class="row justify-content-center align-items-center">
<div id="login-column" class="col-md-6">
<div id="login-box" class="col-md-12">
<form id="login-form" class="form" action="" method="post">
<h3 class="text-center text-info">Login</h3>
<div class="form-group">
<label for="username" class="text-info">Username:</label><br>
<input type="text" name="username" id="username" class="form-control">
</div>
<div class="form-group">
<label for="password" class="text-info">Password:</label><br>
<input type="text" name="password" id="password" class="form-control">
</div>
<div class="form-group">
<label for="remember-me" class="text-info"><span>Remember me</span> <span><input id="remember-me" name="remember-me" type="checkbox"></span></label><br>
<input type="submit" name="submit" class="btn btn-info btn-md" value="Login">
</div>
<div id="register-link" class="text-right">
Forgot your password ?
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
I already found it in the codepen and I can't remember the author's name to mention here.
Related
I want to align a form in the middle of a container. Then set input bar to be as wide as half of that container. Here is my code.
<div id="sub" class="col-6 d-flex justify-content-center">
<div class="d-flex">
<form id="form" action="https://www.freecodecamp.com/email-submit.">
<div class="form-group">
<input id="email" class="form-control text-center" type="email" placeholder="Enter your email">
</div>
<div class="d-flex justify-content-center pt-3">
<input id="submit" class="btn btn-primary" type="submit">
</div>
</form>
</div>
</div>
Can you try to put your code into row?
<div class="container">
<div class="row d-flex justify-content-center">
<div id="sub" class="col-6">
<div class="d-flex">
<form id="form" action="https://www.freecodecamp.com/email submit.">
<div class="form-group">
<input id="email" class="form-control text-center"
type="email" placeholder="Enter your email">
</div>
<div class="d-flex justify-content-center pt-3">
<input id="submit" class="btn btn-primary" type="submit">
</div>
</form>
</div>
</div>
<div>
</div>
This should help.
#sub{
width:100%;
border:1px solid #ccc;
height:400px;
align-items:center;
}
.form-wrapper{
width:50%;
}
input{
width:100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div id="sub" class="d-flex justify-content-center align-items-center">
<div class="form-wrapper">
<form id="form" action="https://www.freecodecamp.com/email-submit.">
<div class="form-group">
<input id="email" class="form-control text-center" type="email" placeholder="Enter your email">
</div>
<div class="d-flex justify-content-center pt-3">
<input id="submit" class="btn btn-primary" type="submit">
</div>
</form>
</div>
</div>
I'm working on a Bootstrap 4 HTML page. I put a button in a panel header:
I need to put the button (and the title) in the middle of the panel header. How can I achieve this goal?
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container p-4 ">
<div class="card">
<div class="card-header">
<p class="float-left display-4">Administrator</p>
<a href="#" class="btn btn-primary float-right" style="align-items: center" routerLink="../list" role="button">
<i class="fa fa-arrow-left"></i> Indietro</a>
</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="form-group">
<label for="displayName">Display name:</label>
<input type="displayName" class="form-control" id="displayName">
</div>
<button type="submit" class="btn btn-primary float-right">Salva</button>
</form>
</div>
</div>
</div>
Thanks
Try using display: flex; for your card header which is available in bootstrap and also instead of using float-right you can use ml-auto to move the button to the right (With the use of flex there is no need to use float properties). Hope this code helps
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container p-4 ">
<div class="card">
<div class="card-header d-flex flex-row align-items-center">
<p class="float-left display-4">Administrator</p>
<a href="#" class="btn btn-primary ml-auto" style="align-items: center" routerLink="../list" role="button">
<i class="fa fa-arrow-left"></i> Indietro</a></div>
<div class="card-body">
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="form-group">
<label for="displayName">Display name:</label>
<input type="displayName" class="form-control" id="displayName">
</div>
<button type="submit" class="btn btn-primary float-right">Salva</button>
</form>
</div>
</div>
</div>
Just add display flex to your card-header class, then align-items: center
.card-header {
padding: .75rem 1.25rem;
margin-bottom: 0;
background-color: rgba(0,0,0,.03);
border-bottom: 1px solid rgba(0,0,0,.125);
display: flex;
justify-content: space-between;
align-items: center;
}
I'm trying to make a login page using Bootstrap. So far so good, the problem is the vertical align. I want to make the login form stick to the center of the page, so I tryed reading all the other answered questions and tryed really a lot of different solutions, but to no avail. My code is the following.
.container {
display: table;
table-layout: fixed;
}
.form-horizontal {
width: 500px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="site_index.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">Username</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="username" placeholder="username" size="16">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="password" size="16">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary btn-lg btn-block" id="signin_button" value="Sign In">Sign in</button>
</div>
</div>
</form>
</div>
<footer id="w3c">
<hr>
<p>
Results and page (C) Copyright NerdLuv Inc.
</p>
<a href="http://validator.w3.org/check/referer">
<img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/4/w3c-html.png" alt="Valid HTML">
</a>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS">
</a>
</footer>
It's kind of hack, but I will try to figure how I can place it exactly in the center.
Just tried to wrap the box(.centerit) and move it's location.
.container {
display: table;
table-layout: fixed;
}
.form-horizontal {
width: 500px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
#outer{
height:800px;
border:2px solid orange;
}
.centerit{
border:3px solid purple;
top:30%;
position:relative;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="outer">
<div class="centerit">
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">Username</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="username" placeholder="username" size="16">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="password" size="16">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary btn-lg btn-block" id="signin_button" value="Sign In">Sign in</button>
</div>
</div>
</form>
</div>
<footer id="w3c">
<hr>
<p>
Results and page (C) Copyright NerdLuv Inc.
</p>
<a href="http://validator.w3.org/check/referer">
<img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/4/w3c-html.png" alt="Valid HTML">
</a>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS">
</a>
</footer>
</div>
</div>
I am having an issue of overlaying a hidden div, when I click a button. What I am trying to have happen is when the hidden div appears that it goes on top of everything else below it based on its height. All I can get it to do is push everything else downwards as you can see in my snippet.
Other solutions that I have looked at haven't taken in consideration of using bootstrap, and when I am testing out the solutions I have found, it puts everything out of whack, and that would be when I use absolute as position, like the solutions I have seen.
Any help would be appreciated.
$(document).ready(function () {
$("#myHiddenDiv").hide();
});
$("#myBtn").click(function () {
$("#myHiddenDiv").toggle();
});
$("#btn2").click(function () {
$("#myHiddenDiv").toggle();
});
#myHiddenDiv {
/*width: 325px;*/
height: 300px;
border: 1px solid green;
background-color: cornflowerblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid">
<div class="form-horizontal">
<div class="row row-splitter">
<label for="ddLocation" class="col-md-1 control-label">Location</label>
<div class="col-md-2">
<div class="btn btn-primary" id="myBtn">Click Me</div>
</div>
<div id="myHiddenDiv" class="col-md-offset-1 col-md-10" style="z-index:2; position:relative">
<div id="MaterialGridList">
</div>
</div>
</div>
<div style="z-index:1; position:relative;">
<div class="row row-splitter">
<label for="ddLocationMaterial" class="col-md-1 control-label">Material</label>
<div class="col-md-2">
<input type="text" class="form-control" placeholder="Location Material.." />
</div>
<label for="ddColor" class="col-md-1 control-label">Color</label>
<div class="col-md-2">
<input type="text" id="ddColor" class="form-control" style="width:100%" />
</div>
<label for="qty" class="col-md-1 control-label">Length</label>
<div class="col-md-2">
<input type="text" id="qty" class="form-control" placeholder="Length..." />
</div>
<label for="ddColor" class="col-md-1 control-label">Width</label>
<div class="col-md-1">
<input type="text" id="qty2" class="form-control" placeholder="Width..." />
</div>
</div>
<div class="row row-splitter">
<label for="ddColor" class="col-md-1 control-label">Width in Inches</label>
<div class="col-md-1">
<input type="text" class="form-control" placeholder="Width..." />
</div>
</div>
<div class="row row-splitter">
<div class="col-md-10 col-lg-offset-1">
<div style="border:1px solid black; height:400px; border-radius:5px;"></div>
</div>
</div>
</div>
</div>
</div>
</body>
Refactoring some stuf, this could work for you. You need to use the atribute "position" with "absolute" value for box and the form need to have "relative" value. Use the z-index attribute to set the position versus other tags.
$(function () {
$("#myBtn").click(function () {
$("#myHiddenDiv").toggle();
});
});
.form-container {
position: relative;
z-index: 8;
}
#myHiddenDiv {
display: none;
height: 100%;
width:100%;
border: 1px solid green;
background-color: cornflowerblue;
position: absolute;
z-index: 9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid">
<div class="form-horizontal">
<div class="row row-splitter">
<label for="ddLocation" class="col-md-1 control-label">Location</label>
<div class="col-md-2">
<div class="btn btn-primary" id="myBtn">Click Me</div>
</div>
</div>
<div class="form-container">
<div id="myHiddenDiv" class="col-md-offset-1 col-md-10">
<div id="MaterialGridList"></div>
</div>
<div class="row row-splitter">
<label for="ddLocationMaterial" class="col-md-1 control-label">Material</label>
<div class="col-md-2">
<input type="text" class="form-control" placeholder="Location Material.." />
</div>
<label for="ddColor" class="col-md-1 control-label">Color</label>
<div class="col-md-2">
<input type="text" id="ddColor" class="form-control" style="width:100%" />
</div>
<label for="qty" class="col-md-1 control-label">Length</label>
<div class="col-md-2">
<input type="text" id="qty" class="form-control" placeholder="Length..." />
</div>
<label for="ddColor" class="col-md-1 control-label">Width</label>
<div class="col-md-1">
<input type="text" id="qty2" class="form-control" placeholder="Width..." />
</div>
</div>
<div class="row row-splitter">
<label for="ddColor" class="col-md-1 control-label">Width in Inches</label>
<div class="col-md-1">
<input type="text" class="form-control" placeholder="Width..." />
</div>
</div>
<div class="row row-splitter">
<div class="col-md-10 col-lg-offset-1">
<div style="border:1px solid black; height:400px; border-radius:5px;"></div>
</div>
</div>
</div>
</div>
</div>
</body>
You'll have to use position: absolute. To fix the whackiness, just add the line width: 100% to #myHiddenDiv.
I would also suggest taking a look at jQuery animation methods, like .fadeToggle() and .slideToggle().
Below's the working sample.
EDIT: Rewrote some code to address issues pointed on comments
$("#myBtn, #btn2").click(function () {
$("#myHiddenDiv").toggle();
});
#myHiddenDiv {
display: none;
position: absolute;
width: 100%;
z-index: 2;
height: 300px;
border: 1px solid green;
background-color: cornflowerblue;
}
#ddColor {
width: 100%;
}
.relative {
position: relative;
z-index: 1;
}
.black-border {
border: 1px solid black;
height: 400px;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid">
<div class="form-horizontal">
<div class="row row-splitter">
<label for="ddLocation" class="col-md-1 control-label">Location</label>
<div class="col-md-2">
<div class="btn btn-primary" id="myBtn">Click Me</div>
</div>
<div id="myHiddenDiv" class="col-md-offset-1 col-md-10">
<div id="MaterialGridList">
</div>
</div>
</div>
<div class="relative">
<div class="row row-splitter">
<label for="ddLocationMaterial" class="col-md-1 control-label">Material</label>
<div class="col-md-2">
<input type="text" class="form-control" placeholder="Location Material.." />
</div>
<label for="ddColor" class="col-md-1 control-label">Color</label>
<div class="col-md-2">
<input type="text" id="ddColor" class="form-control" />
</div>
<label for="qty" class="col-md-1 control-label">Length</label>
<div class="col-md-2">
<input type="text" id="qty" class="form-control" placeholder="Length..." />
</div>
<label for="ddColor" class="col-md-1 control-label">Width</label>
<div class="col-md-1">
<input type="text" id="qty2" class="form-control" placeholder="Width..." />
</div>
</div>
<div class="row row-splitter">
<label for="ddColor" class="col-md-1 control-label">Width in Inches</label>
<div class="col-md-1">
<input type="text" class="form-control" placeholder="Width..." />
</div>
</div>
<div class="row row-splitter">
<div class="col-md-10 col-lg-offset-1">
<div class="black-border"></div>
</div>
</div>
</div>
</div>
</div>
</body>
I have a code like this-
html, body, .container-table {
height: calc(100% - 50px);
}
/*Making a div in center*/
.container-table {
display: table;
}
.vertical-center-row {
display: table-cell;
vertical-align: middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="container container-table">
<!-- Main div to hold all Data -->
<!-- Login Form -->
<div class="row vertical-center-row">
<h2 class="text-center">Login</h2>
<form class="form-horizontal" action="login.html">
<div class="form-group">
<label for="inputEmail" class="control-label col-md-2">Email</label>
<div class="col-md-4">
<input name="email" type="email" class="form-control" placeholder="Email" required>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="text-center control-label col-md-2">Password</label>
<div class="col-md-4">
<input name="password" type="password" class="form-control" placeholder="Password" required>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-4">
<div class="checkbox">
<label>
<input type="checkbox">Remember me</label>
</div>
</div>
</div>
<button name="remember_me" type="submit" class="center-block btn btn-primary">Sign in</button>
</form>
</div>
</div>
So, I am getting a output like this-
But I want to have it like this-
Can anyone please help?
Re-
This Question-
Centering Login Form Bootstrap
Is not a solution for my problem, because if u run the codes given and read the requirements, then u can easily find this.
More- My problem is not centering a div, My problem is centering a div inside of a div which is already centered horizontally and vertically.
Add col-md-offset-3 to the first element of a row in your form
All bootstrap tables have 12 columns -> your form's width is 6 cells -> so you have 6 cells left -> push your form 3 cells and you have 3 on each side
html,
body,
.container-table {
height: calc(100% - 50px);
}
/*Making a div in center*/
.container-table {
display: table;
}
.vertical-center-row {
display: table-cell;
vertical-align: middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="container container-table">
<!-- Main div to hold all Data -->
<!-- Login Form -->
<div class="row vertical-center-row">
<h2 class="text-center">Login</h2>
<form class="form-horizontal" action="login.html">
<div class="form-group">
<label for="inputEmail" class="control-label col-md-2 col-md-offset-3">Email</label>
<div class="col-md-4">
<input name="email" type="email" class="form-control" placeholder="Email" required>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="text-center control-label col-md-2 col-md-offset-3">Password</label>
<div class="col-md-4">
<input name="password" type="password" class="form-control" placeholder="Password" required>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-5 col-md-4">
<div class="checkbox">
<label>
<input type="checkbox">Remember me</label>
</div>
</div>
</div>
<button name="remember_me" type="submit" class="center-block btn btn-primary">Sign in</button>
</form>
</div>
</div>
try
.container-table
{
display: table;
margin: 0 auto;
}
Why don't you simply simply use bootstrap columns ?
With this way the alignment of text and button inside your login div won't be affected, and you don't need any extra CSS :
<div class="container row">
<div class="col-md-4"></div>
<div class="col-md-4">
Your login form HTML here ...
</div>
<div class="col-md-4"></div>
</div>
Please try this:
Put you button inside a div like:
<div class="row">
<button name="remember_me" type="submit" class="center-block btn btn-primary">Sign in</button>
</div>
and assign text-align:center to that div.
html,
body,
.container-table {
height: calc(100% - 50px);
}
body{top:50%;}
/*Making a div in center*/
.container-table {
display: table;
}
.vertical-center-row {
display: table-cell;
vertical-align: middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="container container-table">
<!-- Main div to hold all Data -->
<!-- Login Form -->
<div class="row vertical-center-row">
<div class="col-md-10 col-md-offset-1">
<h2 class="text-center">Login</h2>
</div>
<div class="col-md-10 col-md-offset-1">
<form action="login.html" class="form-horizontal">
<div class="form-group">
<label class="control-label col-md-2" for="inputEmail">Email</label>
<div class="col-md-8">
<input type="email" required="" placeholder="Email" class="form-control" name="email">
</div>
</div>
<div class="form-group">
<label class="text-center control-label col-md-2" for="inputPassword">Password</label>
<div class="col-md-8">
<input type="password" required="" placeholder="Password" class="form-control" name="password">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-8">
<div class="checkbox">
<label>
<input type="checkbox">Remember me</label>
</div>
</div>
</div>
<div>
<div class="col-md-10 col-md-offset-1">
<button class="center-block btn btn-primary" type="submit" name="remember_me">Sign in</button>
</div>
</div>
</form>
</div>
</div>
</div>