https://i.sstatic.net/IYEvl.png
While attempting to apply a gradient color to the entire screen, I encountered an issue where the centered form within a card was shifting to the left when using the container-fluid class. Below is the code snippet:
<div class="container-fluid form">
<div class="row form-row">
<div class="col-sm-9 col-md-7 col-lg-5 mx-auto signinform">
<div class="card card-signin my-5">
<div class="card-body">
<h5 class="card-title text-center">Sign In</h5>
<form class="form-signin">
<div class="form-label-group">
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputEmail">Email address</label>
</div>
<div class="form-label-group">
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<label for="inputPassword">Password</label>
</div>
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Remember password</label>
</div>
<button class="btn btn-lg btn-primary btn-block text-uppercase" type="submit">Sign in</button>
<hr class="my-4">
<button class="btn btn-lg btn-google btn-block text-uppercase" type="submit"><i class="fab fa-google mr-2"></i> Sign in with Google</button>
<button class="btn btn-lg btn-facebook btn-block text-uppercase" type="submit"><i class="fab fa-facebook-f mr-2"></i> Sign in with Facebook</button>
</form>
</div>
</div>
</div>
</div>
</div>
CSS
:root {
--input-padding-x: 1.5rem;
--input-padding-y: .75rem;
}
.container-fluid,.row {
height: 100vh;
text-align: center;
background: #FF512F; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #DD2476, rgb(47, 120, 255)); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #DD2476, rgb(47, 95, 255)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.card.card-signin.my-5 {
background-color: rgba(255, 255, 255, 0.6);
}
.col-sm-9.col-md-7.col-lg-5.mx-auto {
align-items: center;
display: flex;
}
.card-signin {
border: 0;
border-radius: 1rem;
box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
}
/* Additional CSS properties go here */
Due to the limitations of the Angular project's structure, I am unable to utilize the body tag. How can I ensure that the form remains centered without shifting to the left? What could be the issue?