Form Center

mita asked 8 years ago

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

mita answered 8 years ago

i am waiting for your response.

Marta Szymanska staff pro premium answered 8 years ago

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>
and in CSS use this:
 .modal-footer {
            margin-top: 1rem;
        }
       
            .flex-center {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100%;
        }

mita answered 8 years ago

thank you. :)
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: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes