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/
Related
Well this is my code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="span4 offset4 centered">
<div class="container overflow-hidden">
<div class="col-6">
<div class="p-3 border bg-light">
<form>
<div class="container px-4">
<div className="container">
<h3>Login</h3>
</div>
<div className="container">
<div className="row align-items-center">
<label>Email address</label>
<input type="email" className="form-control" placeholder="Enter email" />
</div>
</div>
<div className="container">
<div className="row align-items-center">
<label>Password</label>
<input type="password" className="form-control" placeholder="Enter password" />
</div>
</div>
<div className="container">
<div className="row align-items-center">
<div className="custom-control custom-checkbox">
<input type="checkbox" className="custom-control-input" id="customCheck1" />
</div>
</div>
</div>
<div className="container">
<div className="row align-items-center">
<button type="submit" class="btn btn-outline-warning">Login</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
the problem is that I'd like to center it vertical and horizontal. I thoutght this is possible with the <div class="span4 offset4 centered"> but it wasn't. Anyone know an answer?
I also tried to use my own styling but it didn't work too
Why are you not using bootstraps classes? I made some changes in your code. check below code
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div style="height: 100vh">
<div class="container h-100">
<div class="row justify-content-center h-100 align-items-center">
<div class="col-md-6">
<div class="p-3 border bg-light">
<h3>Login</h3>
<form action="">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" placeholder="Enter email" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" placeholder="Enter password" id="pwd">
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-outline-warning">Login</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Just add mx-auto and my-auto to the element you want to center within it's parent.
Like this:
<div class="parent">
<div class="container mx-auto my-auto">
<!--Content-->
</div>
</div>
Now .container would be centered vertically and horizontally inside .parent
I have created a panel for my webpage. The panel contains two text boxes with labels. As of now the two text boxes are in the same row. I want each text box to be in a different row. How should I do it? I have tried including the <br> inside the panel.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="C:Users/annap/code/interview-scheduler/qxf2_scheduler/static/css/qxf2_scheduler.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.navbar img {
float: left;
width: 80px;
height: 80px;
position: relative;
top: -12px;
}
.navbar h1 {
top: 18px;
font-size: 30px;
color: brown;
text-align: center;
}
.navbar {
min-height: 80px;
}
</style>
</head>
<body style="background-color:powderblue;">
<nav class="navbar navbar-default header">
<div class="container-fluid">
<div class="navbar-header">
<h1>My heading</h1>
</div>
</div>
</nav>
<div class="container">
<div class="panel panel-default" style="max-width:500px;margin-left:auto;margin-right:auto;">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
<p>Thankyou for applying with us. To schedule an interview please fill the below details </p>
<div class="form-group">
<label class="col-md-3 control-label"><span style="color:red">*</span>Enter your name</label>
<div class="col-md-3">
<input id="candidate-name" name="candidate-name" type="text" placeholder="John"
class="form-control input-md" required>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"><span style="color:red">*</span>Enter your email</label>
<div class="col-md-3">
<input id="candidate-email" name="candidate-email" type="email" placeholder="johndoe#example.com"
class="form-control input-md" required>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="save"></label>
<div class="col-md-8">
<input class="btn btn-success show-modal" type='submit' id='submit' value='Go for schedule'>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I can see two text boxes with name and email coming in one row.
What I have tried is
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
by referring to this link https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_stacked_form,
but its not working. What am I doing wrong?
You want something like this?
<div class="form-group">
<div class="row">
<label class="col-md-4 control-label"><span style="color:red">*</span>Enter your name</label>
<div class="col-md-7">
<input id="candidate-name" name="candidate-name" type="text" placeholder="John"
class="form-control input-md" required>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-md-4 control-label"><span style="color:red">*</span>Enter your email</label>
<div class="col-md-7">
<input id="candidate-email" name="candidate-email" type="email"
placeholder="johndoe#example.com" class="form-control input-md" required>
</div>
</div>
</div>
Or Like this:
<div class="container">
<div class="panel panel-default" style="max-width:500px;margin-left:auto;margin-right:auto;">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
<p>Thankyou for applying with us. To schedule an interview please fill the below details </p>
<div class="row justify-content-center">
<div class="col-lg-6 col-md-3 col-sm-3 clo-xs-3">
<div class="form-group">
<label class="formGroupExampleInput" for="formGroupExampleInput">Enter your name</label>
<input id="afm" class="form-control custom-input-text" placeholder="">
</div>
</div>
<div class="col-lg-6 col-md-3 col-sm-4 clo-xs-3" >
<div class="form-group">
<label class="formGroupExampleInput" for="formGroupExampleInput">Enter your email</label>
<input id="afm" class="form-control custom-input-text" placeholder="">
</div>
</div>
</div>
</div>
</div>
</div>
Issue is using col remove that col form label and input will fix the issue
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.navbar img {
float: left;
width: 80px;
height: 80px;
position: relative;
top: -12px;
}
.navbar h1 {
top: 18px;
font-size: 30px;
color: brown;
text-align: center;
}
.navbar {
min-height: 80px;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="C:Users/annap/code/interview-scheduler/qxf2_scheduler/static/css/qxf2_scheduler.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body style="background-color:powderblue;">
<nav class="navbar navbar-default header">
<div class="container-fluid">
<div class="navbar-header">
<h1>My heading</h1>
</div>
</div>
</nav>
<div class="container">
<div class="panel panel-default" style="max-width:500px;margin-left:auto;margin-right:auto;">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
<p>Thankyou for applying with us. To schedule an interview please fill the below details </p>
<div class="form-group ">
<label class=" control-label"><span style="color:red">*</span>Enter your name</label>
<div class="">
<input id="candidate-name" name="candidate-name" type="text" placeholder="John"
class="form-control input-md" required>
</div>
</div>
<div class="form-group">
<label class=" control-label"><span style="color:red">*</span>Enter your email</label>
<div class="">
<input id="candidate-email" name="candidate-email" type="email" placeholder="johndoe#example.com"
class="form-control input-md" required>
</div>
</div>
<div class="form-group">
<label class=" control-label" for="save"></label>
<div class="">
<input class="btn btn-success show-modal" type='submit' id='submit' value='Go for schedule'>
</div>
</div>
</div>
</div>
</div>
</body>
I got what I'm looking for but the animation effect isn't smooth as it should. I understand that the animation would be better if I don't have padding but I need padding to get the design. How do I solve this problem?
JSFiddle DEMO
HTML:
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="block">
<label class="checkbox"> This is my checkbox
<input type="checkbox" data-toggle="collapse" data-target="#collapseExample">
</label>
<div class="collapse" id="collapseExample">
<div class="row">
<div class="col-12">
<div class="form-group">
<input type="number" class="form-control" placeholder="option one">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option two">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option three">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.block {
margin-top: 30px;
}
.collapse {
background-color: #eee;
padding: 30px 15px;
}
This is base on Bootstrap 4, the latest version.
When you set .collapse it first apply the bootstrap style of .collapse and after yours because that there is delay...
Use the id #collapseExample to style:
.block {
margin-top: 30px;
}
#collapseExample{
background-color: #eee;
padding: 30px 15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="block">
<label class="checkbox"> This is my checkbox
<input type="checkbox" data-toggle="collapse" data-target="#collapseExample">
</label>
<div class="collapse" id="collapseExample">
<div class="row">
<div class="col-12">
<div class="form-group">
<input type="number" class="form-control" placeholder="option one">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option two">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option three">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
EDIT to your comment!
There's a "drag" when it closes.
Use jquery onclick the checkbox and apply padding as below:
fiddle here
$('.checkbox').on('click', function(){
if($('.collapse.show').length>0)
$('.collapse').css('padding','0');
else
$('.collapse').css('padding','30px 15px');
});
.block {
margin-top: 30px;
}
#collapseExample{
background-color: #eee;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="block">
<label class="checkbox"> This is my checkbox
<input type="checkbox" data-toggle="collapse" data-target="#collapseExample">
</label>
<div class="collapse" id="collapseExample">
<div class="row">
<div class="col-12">
<div class="form-group">
<input type="number" class="form-control" placeholder="option one">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option two">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option three">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I got it resolved. It's because I added the padding in parent div.
.block {
margin-top: 30px;
}
.block__collapse {
background-color: #eee;
padding: 30px 15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="block">
<label class="checkbox"> This is my checkbox
<input type="checkbox" data-toggle="collapse" data-target="#collapseExample">
</label>
<div class="collapse" id="collapseExample">
<div class="block__collapse">
<div class="row">
<div class="col-12">
<div class="form-group">
<input type="number" class="form-control" placeholder="option one">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option two">
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="option three">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have created a form inside a Panel in bootstrap
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<form>
<div class="panel panel-primary">
<div class="panel-heading">Search</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 form-group">
<label>Label1</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label2</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label3</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label4</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<button class="btn btn-primary">Search</button>
</div>
</div>
</div>
</div>
</form>
When I run it, the panel spans from the far left to the far right. How can I get some spacing on the left and right so that panel boundary can be easily distinguished from the browser boundary.
Just wrap your panel within a container-fluid class
example snippet
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<form>
<div class="container-fluid">
<div class="panel panel-primary">
<div class="panel-heading">Search</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 form-group">
<label>Label1</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label2</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label3</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label4</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<button class="btn btn-primary">Search</button>
</div>
</div>
</div>
</div>
</div>
</form>
With custom css--
.wrapper {
margin-left: 2%;
margin-right: 2%;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<form>
<div class="wrapper">
<div class="panel panel-primary">
<div class="panel-heading">Search</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 form-group">
<label>Label1</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label2</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label3</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label4</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<button class="btn btn-primary">Search</button>
</div>
</div>
</div>
</div>
</div>
</form>
Just add some margin to the .panel
.panel { margin-left: 10px; margin-right: 10px; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<form>
<div class="panel panel-primary">
<div class="panel-heading">Search</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 form-group">
<label>Label1</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label2</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label3</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label4</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<button class="btn btn-primary">Search</button>
</div>
</div>
</div>
</div>
</form>
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>