Topic: Horizontal and Vertical Align Signup Page

jicee13 pro asked 4 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 3 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


Mei free answered 3 years ago


not working in IE :(


Marta Wierzbicka staff answered 4 years ago


Hi, use this code, I think this is what you're looking for: <!-- 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 4 years ago

That's perfect. Exactly what I needed. Thank you very much.

Marta Wierzbicka staff commented 4 years ago

You're welcome.

Marta Wierzbicka staff answered 4 years ago


Hi, you want to align this form in the intro like here https://mdbootstrap.com/previews/docs/latest/html/intros/intro-register-classic-form.html or where? Best, Marta

jicee13 pro commented 4 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=sharing


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags