I am trying to float a bootstrap badge to right of a label. However I run into problems with spacing and with the element that the span is with in resizing.
It seems that my element size changes enough when the badge appears that it forces the label to move within the span.
<div class="row-fluid" style="padding-top: 10px;">
<div class="span4 text-center">
<span class="tab">
<a class="tab" href="javascript:void(0)" ng-click="tabSelected('one')">Stuff 1</a>
</span>
<span class="badge badge-success" ng-show="currentTab == 'one'">0</span>
</div>
<div class="span4 text-center">
<span class="tab">
<a class="tab" href="javascript:void(0)" ng-click="tabSelected('two')">Stuff 2</a>
</span>
<span class="badge badge-success" ng-show="currentTab == 'two'">0</span>
</div>
</div>
</div>
Is there a way to place the badge just to the right of the label such that when the badge appears/disappears the label does not move.
I am using bootstrap 2.
Plunk here to demonstrate: http://plnkr.co/edit/iurlXU?p=preview
Click each label to switch the badge.
This is happening because you are using the text-center class. The text-center class always places the the text in the center on the div based on the text's length. When you de/activate the badge the length changes and therefore the text is moved a bit to the right or the left. If you remove the text-center alignment you get the expected result.
If it is required to have the content of the div placed somewhere specifically in the page you can utilise a grid style with a <div class="row"> / offset and col-x size in order to bring the div in the required position (1).