Hello there! I am trying to center the login form on my webpage and I have added this code to my index file:
Here is the complete code snippet:
<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>
Furthermore, I have included this 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;
}
Can you help me identify what might be causing the issue?