bayman bayman - 4 months ago 39
HTML Question

How to center social buttons in bootstrap login page?

I am using django-allauth, bootstrap, font awesome and bootstrap-social for the social media login buttons in my login form. I can't figure out how to center the social buttons within my login-well below. It appears to be aligning to the right of the login well instead of centered. What should I be doing?

jsfiddle

html:

<div class="container">
<div class="row row-centered">
<div class="col-md-4 col-centered">
<div class="well login-well">
<div class="socialaccount_ballot col-md-11">
<ul class="socialaccount_providers">
<li>
<a title="Google" class="btn btn-block btn-social btn-md socialaccount_provider btn-google" href="/accounts/google/login/?process=+login+">
<i class="fa fa-google"></i>Log in with Google
</a>
</li>
<li>
<a title="Facebook" class="btn btn-block btn-social btn-md socialaccount_provider btn-facebook" href="/accounts/facebook/login/?process=+login+">
<i class="fa fa-facebook"></i>Log in with Facebook
</a>
</li>
<li>
<a title="Twitter" class="btn btn-block btn-social btn-md socialaccount_provider btn-twitter" href="/accounts/twitter/login/?process=+login+">
<i class="fa fa-twitter"></i>Log in with Twitter
</a>
</li>
</ul>
</div>
<div class="col-md-12">
<hr>
<form class="login" method="POST" action="/login/">
<div class="form-group"><label class="control-label" for="id_login">Username</label><input autofocus="autofocus" class="form-control" id="id_login" maxlength="30" name="login" placeholder="Username" required="required" title="" type="text" /></div>
<div class="form-group"><label class="control-label" for="id_password">Password</label><input class="form-control" id="id_password" name="password" placeholder="Password" required="required" title="" type="password" /></div>
<div class="form-group"><div class="checkbox"><label for="id_remember"><input class="" id="id_remember" name="remember" type="checkbox" /> Remember Me</label></div></div>
<div class="form-group pull-center">
<button class="btn btn-primary btn-block" type="submit">Sign In</button>
</div>
</form>
<hr>
</div>
<div class="form-group">
<small><a class="text-muted" href="/password_reset/">Forgot Password?</a></small>
<br>
<small><a class="text-muted" href="/signup/">Sign up</a></small>
</div>
</div>
</div>
</div>
</div>


css:

.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
.socialaccount_providers li a.socialaccount_provider {
rem-border: 1px solid #ddd;
border-radius: 2px;
rem-box-shadow: 2px 2px 8px rgba(0,0,0,.7);
-padding: 10px;
margin-bottom: 6px;
display: block;
width: 100%;
overflow: hidden;
rem-font-size: 1.2em;

}

.socialaccount_providers li a.socialaccount_provider:hover {
text-decoration: none;
box-shadow: 1px 1px 2px rgba(0,0,0,.7);
}

.socialaccount_providers li a.socialaccount_provider.facebook {
background: #4B67A3;
color: #fff;
}
.socialaccount_providers li a.socialaccount_provider.facebook:before {
font-family: FontAwesome;
font-size: 1.9em;
content: "\f082";
display: inline-block;
padding-left: 8px;
padding-right: 8px;
}


What I want it to look like when social buttons are centered:
login buttons

Answer

The ul.socialaccount_providers has a inexplicit padding-left = 40px;

Just throwing in .socialaccount_providers {padding-left:0;} fixes it.

Comments