Topic: Horizontal and Vertical Align Signup Page
jicee13 pro asked 6 years ago
I'm really struggling with understanding the documentation of vertically and horizontally aligning with a flexbox. I am using the MD SignUp code snippet and simply want to vertically and horizontally align it using a flexbox. Below is my code. Can someone show me how to vertically and horizontally align it please?
<div class="container d-flex flex-column w-50 justify-content-center"> <!--Register form--> <form> <p class="h5 text-center mb-4">Sign up</p> <div class="md-form"> <i class="fa fa-user prefix grey-text"></i> <input type="text" id="orangeForm-name" class="form-control" mdbActive> <label for="orangeForm-name">Your name</label> </div> <div class="md-form"> <i class="fa fa-envelope prefix grey-text"></i> <input type="text" id="orangeForm-email" class="form-control" mdbActive> <label for="orangeForm-email">Your email</label> </div> <div class="md-form"> <i class="fa fa-lock prefix grey-text"></i> <input type="password" id="orangeForm-pass" class="form-control" mdbActive> <label for="orangeForm-pass">Your password</label> </div> <div class="text-center"> <button class="btn btn-deep-orange waves-light" mdbRippleRadius>Sign up</button> </div> </form> <!--/Register form--> </div>
Marta Wierzbicka staff answered 5 years ago
Hi,
as you can read in our official statement of supported browsers and devices, we do not support IE.
https://mdbootstrap.com/general/browsers-and-devices/
We are doing our best to ensure compatibility with older browsers, however, due to technical limitations, it's not always possible. IE11 is almost 6 years old and doesn't support many crucial features like flexbox.
If we decided to fully support old browsers, we would neglect the development and improvement of our products
Best Regards, Marta
Marta Wierzbicka staff answered 6 years ago
<!-- Start your project here-->
<div style="height: 100vh">
<div class="d-flex justify-content-center align-items-center h-100">
<div class="container">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-12">
<!--Register form-->
<form>
<p class="h5 text-center mb-4">Sign up</p>
<div class="md-form">
<i class="fa fa-user prefix grey-text"></i>
<input type="text" id="orangeForm-name" class="form-control" mdbActive>
<label for="orangeForm-name">Your name</label>
</div>
<div class="md-form">
<i class="fa fa-envelope prefix grey-text"></i>
<input type="text" id="orangeForm-email" class="form-control" mdbActive>
<label for="orangeForm-email">Your email</label>
</div>
<div class="md-form">
<i class="fa fa-lock prefix grey-text"></i>
<input type="password" id="orangeForm-pass" class="form-control" mdbActive>
<label for="orangeForm-pass">Your password</label>
</div>
<div class="text-center">
<button class="btn btn-deep-orange waves-light" mdbRippleRadius>Sign up</button>
</div>
</form>
<!--/Register form-->
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
</div>
</div>
<!-- /Start your project here-->
Best,
Marta
jicee13 pro commented 6 years ago
That's perfect. Exactly what I needed. Thank you very much.Marta Wierzbicka staff commented 6 years ago
You're welcome.Marta Wierzbicka staff answered 6 years ago
jicee13 pro commented 6 years ago
Kind of. I'm going more for this look. Vertical and horizontal centered. Right now I'm using for temporary just to give you an idea of what I'm looking for. (link to foto below) https://drive.google.com/file/d/1olFlPczY8tEtIyr57xchEPiqkrMY2lWi/view?usp=sharingFREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No