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>
Related
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.
I want to design a page in which half-left portion of the viewport for Login & other half-right portion of the viewport for Signup i.e with split layout(side by side in tablet,desktop, and large screen & stacked(top for login & Bottom for Signup after reaching within a mobile width range) in mobile, and lower devices). I made this with two col-md-6 (one for Login & another for Signup) with 100vh for min-width:768px and above and with 50vh for max-width:768px devices(means in mobile devices it display as stacked) and below. I made this code but after size testing(by scaling browser window) I am facing problem(on scale down) like Login portion(i.e. Half-left) height take size as the login form. I have not given any specific width & height of any div(Because bootstrap handle it automatically using grid system). I am giving the code so that you can help me.
I Want this Output(Actually I get it with small flaw)
Sample-in-mobile
Sample-in-Computer
Problem:
Problem
/*index.css*/
body {
padding-top: 56px;
}
.tmbl-nav {
background-color: #001427;
}
.container-fluid {
padding-right: 0px;
padding-left: 0px;
}
/*.left-side,.right-side{
height:50vh;
width:100%;
}
*/
.left-side {
background-color: #BF0603;
}
.right-side {
background-color: #8D0801;
}
.form-box {
background-color: white;
padding: 25px 25px 25px 25px;
}
/* Medium devices (landscape tablets, 768px and down) */
#media only screen and (max-width:768px) {
.nav-link {
text-align: center;
}
}
#media screen and (min-width:768px) {
.left-side,
.right-side {
height: 100vh;
}
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<!--index.php-->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="styles/index.css" />
<title>My Web Site</title>
</head>
<body>
<?php include_once("inc/header.php");?>
<!--navbar for navigation-->
<div class="container-fluid">
<div class="row no-gutters">
<div class="left-side col-md-6 d-flex align-items-center">
<div class="container">
<div class="row no-gutters justify-content-center">
<div class="col-md-6 text-center align-items-center">
<div class="form-box-top text-center text-light">
<h2>Login Now</h2>
<p>Enter Username & Password to Log on.</p>
</div>
<div class="form-box rounded">
<form>
<div class="form-group">
<label for="inputUName" class="sr-only">Username</label>
<input type="text" class="form-control" id="inputUName" aria-describedby="userName" placeholder="Username" />
</div>
<div class="form-group">
<label for="inputPsword" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPsword" aria-describedby="password" placeholder="Password" />
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="right-side col-md-6 d-flex align-items-center">
<div class="container">
<div class="row no-gutters justify-content-center">
<div class="col-md-6 text-center align-items-center">
<div class="form-box-top text-center text-light">
<h2>Register Now</h2>
<p>Fill in the below form to get instant access.</p>
</div>
<div class="form-box rounded">
<form>
<div class="form-group">
<label for="inputFName" class="sr-only">Full Name</label>
<input type="text" class="form-control" id="inputFName" aria-describedby="fullName" placeholder="Full Name" />
</div>
<div class="form-group">
<label for="inputEmail" class="sr-only">Email</label>
<input type="email" class="form-control" id="inputEmail" aria-describedby="email" placeholder="Email" />
</div>
<div class="form-group">
<label for="inputMobile" class="sr-only">Mobile</label>
<input type="number" class="form-control" id="inputMobile" aria-describedby="mobile" placeholder="Mobile Number" />
</div>
<div class="form-group">
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword" aria-describedby="password" placeholder="Password" />
</div>
<div class="form-group">
<label for="inputCPassword" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputCPassword" aria-describedby="confirmPassword" placeholder="Confirm Password" />
</div>
<div class="form-group row text-dark">
<label for="checkYesNo" class="col-auto pt-0 col-form-label">You have Reference ID:</label>
<div class="col-auto">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" name="inlineRadioOptions" id="inlineRadio1" value="option1" />
<label class="custom-control-label" for="inlineRadio1">Yes</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" name="inlineRadioOptions" id="inlineRadio2" value="option2" />
<label class="custom-control-label" for="inlineRadio2">No</label>
</div>
</div>
</div>
<div class="form-group">
<label for="inputREmail" class="sr-only">Reference Email ID</label>
<input type="email" class="form-control" id="inputREmail" aria-describedby="referenceEmail" placeholder="Referral Email ID" />
</div>
<div class="form-group text-dark">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="checkTC" />
<label class="custom-control-label" for="checkTC">
I Agree all the Terms & Condition
</label>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JQuery,then Popper.js, then Bootstrap.min.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/indexnavigation.js"></script>
</body>
</html>
just remove the following code present in your CSS, That should fix it.
#media screen and (min-width:768px) {
.left-side,
.right-side {
height: 100vh;
}
}
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 just need to align the textbox and label to the center of the page. I am unable to get this. Every time its left aligned. Please need suggestions
Html code:
<!DOCTYPE html>
<html>
<head>
<title>ProjectID Creation</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<link href="font.css" rel="stylesheet" />
</head>
<body>
<div class="container" style="background-color:dodgerblue">
<h2><b>ProjectID Creation</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-sm-4 form-group col-md-4 col-xs-12">
<div class="form-group">
<label id="label" class="control-label" >UserID:</label>
<input type="text" class="form-control" name="user" ng-model="user" placeholder="Enter UserID" autocomplete="off" required />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 form-group col-md-4 col-xs-12">
<div class="form-group">
<label id="label" class="control-label">ProjectID:</label>
<input type="text" class="form-control" name="project" ng-model="project" placeholder="Enter ProjectID" autocomplete="off" required />
</div>
</div>
</div>
<div class="temp123" style="margin-bottom:60px">
<button type="submit" class="btn btn-primary" ng-click="create()">Create</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Here is my code in jsfiddle
You can use text-align:center and col-lg-offset-4 and col-sm-offset-4 try the demo
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<div class="container" style="background-color:dodgerblue">
<h2><b>ProjectID Creation</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-body text-center">
<div class="row">
<div class="col-sm-4 form-group col-md-4 col-xs-12 col-lg-offset-4 col-sm-offset-4">
<div class="form-group">
<label id="label" class="control-label" >UserID:</label>
<input type="text" class="form-control" name="user" ng-model="user" placeholder="Enter UserID" autocomplete="off" required />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 form-group col-md-4 col-xs-12 col-lg-offset-4 col-sm-offset-4">
<div class="form-group">
<label id="label" class="control-label">ProjectID:</label>
<input type="text" class="form-control" name="project" ng-model="project" placeholder="Enter ProjectID" autocomplete="off" required />
</div>
</div>
</div>
<div class="temp123" style="margin-bottom:60px">
<button type="submit" class="btn btn-primary" ng-click="create()">Create</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
</div>
Just this,
<style type="text/css">
.container{
margin: 0 auto;
width: 210px;
}
.form label{
display: inline-block;
text-align: right;
float: left;
}
.form input{
display: inline-block;
text-align: left;
float: right;
}
</style>
Demo here: https://jsfiddle.net/durtpwvx/
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>