Topic: Form Center
Dear sir/mam,
hello. I am using following code for login form, i just want to align form center vertically and horizontally like this url http://swlabs.co/edugate/login.html can you please help me.
HTML code
<div class="container">
<div class="row">
<div class="col-md-5">
<!--Form without header-->
<div class="card login" >
<div class="card-block">
<!--Header-->
<div class="text-xs-center">
<h3><i class="fa fa-lock"></i> Login:</h3>
<hr class="mt-2 mb-2">
</div>
<!--Body-->
<div class="md-form">
<i class="fa fa-envelope prefix"></i>
<input type="text" id="form2" class="form-control">
<label for="form2">Your email</label>
</div>
<div class="md-form">
<i class="fa fa-lock prefix"></i>
<input type="password" id="form4" class="form-control">
<label for="form4">Your password</label>
</div>
<div class="text-xs-center">
<button class="btn btn-deep-purple">Login</button>
</div>
</div>
<!--Footer-->
<div class="modal-footer">
<div class="options">
<p>Not a member? Sign Up</p>
<p>Forgot Password?</p>
</div>
</div>
</div>
<!--/Form without header-->
</div>
</div>
</div>
css code:
.login
{
background-color: #FFF;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
}
Thank you.
Regards,
Mita
<h3><i class="fa fa-lock"></i> Login:</h3>
<hr class="mt-2 mb-2">
</div>
<!--Body-->
<div class="md-form">
<i class="fa fa-envelope prefix"></i>
<input type="text" id="form2" class="form-control">
<label for="form2">Your email</label>
</div>
<div class="md-form">
<i class="fa fa-lock prefix"></i>
<input type="password" id="form4" class="form-control">
<label for="form4">Your password</label>
</div>
<div class="text-xs-center">
<button class="btn btn-deep-purple">Login</button>
</div>
</div>
<!--Footer-->
<div class="modal-footer">
<div class="options">
<p>Not a member? Sign Up</p>
<p>Forgot Password?</p>
</div>
</div>
</div>
<!--/Form without header-->
</div>
</div>
</div>
css code:
.login
{
background-color: #FFF;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
}
Thank you.
Regards,
Mita
Add comment
In your form you mixed classes from MDB4 with your MDB3, that's why I recommend you download Material Design for Bootstrap 4, it's also free and has much more possibilities. But you can use this code to center your form:
<div style="height: 100vh;">
<div class="flex-center">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<!-Form without header->
<div class="card login">
<div class="card-content">
<div class="text-center">
<h3><i class="fa fa-lock"></i> Login:</h3>
</div>
<div class="row">
<form class="col-md-12">
<div class="row">
<div class="input-field col-md-12">
<i class="fa fa-envelope prefix"></i>
<input id="icon_prefix" type="text" class="validate">
<label for="icon_prefix">Your email</label>
</div>
<div class="input-field col-md-12">
<i class="fa fa-lock prefix"></i>
<input id="icon_telephone" type="tel" class="validate">
<label for="icon_telephone">Your password</label>
</div>
</div>
</form>
</div>
<div class="text-center">
<button class="btn btn-default waves-effect waves-light">Login</button>
</div>
<!–Footer–>
<div class="modal-footer">
<div class="options">
<p>Not a member? Sign Up</p>
<p>Forgot Password?</p>
</div>
</div>
</div>
</div>
<!–/Form without header–>
</div>
</div>
</div>
</div>
</div> .modal-footer {
margin-top: 1rem;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: Yes
Tags