Is there any way to make this form move to center?

Question

Hi, I want to move the log in form to the center and I put this code to my index file:

Below is my full code:

<section class="row" justify-content-center>
   <section class="col-12-sm col-md-3">
      <form class="form-container">
         <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
         </div>
         <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1">
         </div>
         <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">Check me out</label>
         </div>
         <button type="submit" class="btn btn-primary btn-block">Submit</button>
      </form>
   </section>
   <div class="row">
      <div class=""></div>
   </div>
</section>
</section>

and here is my css code:

    .bg{
background: url('../images/bg-1.jpg') no-repeat;
width: 100%;
height: 100%;
background-size: 100%
}

.form-container{
    top: 15vh;
    background: #fff;
    padding: 30px;
    border-radius:10px;
    box-shadow: 0px 0px 10px 0px #000;
}

What could be wrong here?

score 0 · Accepted Answer · answered May 04 '20 at 16:00

 .row
{
  display:flex;
  align-items:center;
  justify-content:Center;
}

        


        <div class="row">
          <div class="form-container">
            <input type="email" /><br />
            <input type="password" />
          </div>
        </div>

Is there any way to make this form move to center?

1 Answers1