I have a unique password reset method here: Jumbotron-Form-Bootstrap-My-Attempt
Displayed below is the code from the image above:
<div class="container">
<div class="jumbotron">
<br><br>
<h2>Forget Password</h2>
<br><br>
<div class="alert alert-info" style="margin-top:18px;">
<a class="close" href="#" data-dismiss="alert" aria-label="close" title="close">×</a>
<strong>Info!</strong>
Please enter your email address. You will receive a link to create a new password via email.!
</div>
<div>
<?php if(isset($msg)) { echo $msg; } ?>
</div>
<br>
<form method="post">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="emailUsername">Email or Username:</label>
<input name="email" type="text" class="form-control" id="emailUsername" placeholder="Enter your Email or Username">
</div>
</div>
</div>
<br>
<button name="submit" type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
To achieve the desired look as shown here:
Jumbotron-Form-Bootstrap-Wanted but maintained within a jumbotron for aesthetic purposes.
My current query is: How can I centrally align the jumbotron (or any special class for this purpose) both vertically and horizontally on all devices, so it appears in the middle of the page consistently?
I attempted
.jumbotron {
max-width: 500px;
margin: 0 auto;
}
but noticed that this adjustment caused the input field to shrink.