Reputation: 29
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
Upvotes: 0
Views: 68
Reputation: 159
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
Upvotes: 0
Reputation: 518
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>
Upvotes: 1