Struggling with aligning the elements of a Bootstrap well in the center? The badge is off to the side instead of below the arrows, and the vote buttons are not centered within the well. Check out the code snippet below:
HTML:
<div class="col-md-1 col-sm-1 well">
<div class="votingButton" data-ng-controller="pfcArticleVoting" data-ng-click="upVote(article);">
<i class="glyphicon glyphicon-chevron-up"></i>
</div>
<div class="badge badge-inverse">
<div>{{article.articlevotes}}</div>
</div>
<div class="votingButton" data-ng-controller="pfcArticleVoting" data-ng-click="downVote(article);">
<i class="glyphicon glyphicon-chevron-down"></i>
</div>
Custom CSS used:
/* Voting styling */
.votingButton{
cursor: pointer;
}
Here's a screenshot for reference: