Is there a way to vertically center the Google icon in the bootstrap social button for Google? Currently, it is not aligned properly.
I have tried using flexbox properties to align the "G" vertically but it doesn't seem to be working. Here is the snippet of my CSS code:
body {
background-color: #E8ECEF;
}
.centered {
padding-top: 200px;
text-align: center;
}
.secret-text {
text-align: center;
font-size: 2rem;
color: #fff;
background-color: #000;
}
<!-- just tried this part out also didn't change the G-->
.btn-google{
display: flex;
align-items: center;
justify-content: center;
}<div class="container mt-5">
<h1>Login</h1>
<div class="row">
<div class="col-sm-8">
<div class="card">
<div class="card-body">
<!-- Makes POST request to /login route -->
<form action="/login" method="POST">
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" name="username">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" name="password">
</div>
<button type="submit" class="btn btn-dark">Login</button>
</form>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<a class="btn btn-block btn-social btn-google" href="/auth/google" role="button">
<i class="fab fa-google"></i>
Sign In with Google
</a>
</div>
</div>
</div>
</div>
</div>This is the complete code for my login page, excluding headers and footers. I have also included the relevant CSS and image files for reference.
Bootstrap social CSS is being used on this page as well.