CODEWITHSUNDEEP
csstwitter-bootstrap
Kode
Kode

Reputation: 3225

Center within a Bootstrap Well

I have been struggling to get the contents of a boostrap well to center. My badge goes to the right, instead of under the arrows, and my arrows (aka, vote buttons) are not centered in the well either. I have attached a screenshot, and here is the relevant code:

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>

Here is the only custom CSS beyond default bootstrap:

/* Voting styling */
.votingButton{
cursor: pointer;
}

Here is the screenshot:

Non centered bootstrap well

Upvotes: 1

Views: 1013

Answers (2)

Kirk Powell
Kirk Powell

Reputation: 910

Your column width is too small to render correctly. You need to change col-md-1 col-sm-1 to col-md-2 col-sm-2 or reduce the padding inside the div.

Upvotes: 1

Dylan L.
Dylan L.

Reputation: 1317

try class="text-center", that should do the trick, if not you can reposition it using style="postion: absolute; margin-left: -5px;", if you're not too picky about the well size, that might be another problem as "well". fix the size to be a little bigger, that would help.

Upvotes: 2

Related Questions