How to fix the css red notification bubble

How to fix the css red notification bubble References I have a Html Like follows which I created using twitter bootstrap.

<@= friendRequestCollection.size() @>

<@ friendRequestCollection.each(function(user) { @>
• \"><@= user.get(\'firstName\') @>
<@ }); @>

I am trying to create a red notification bubble on the eye icon but its not looking so good. My css for notification bubble. .noti_Container { position: relative; /* This is just to show you where the container ends */ width: 16px; height: 16px; cursor: pointer; } .noti_bubble { position: absolute; top: 2px; right: 10px; background-color: red; color: white; font-weight: bold; font-size: 14px; border-radius: 2px; } What i wanted is like hide the small arrow created by bootstrap with the red bubble and when the number increase in the bubble the bubble size must increase right side. Currently its increasing on left side so if the number inside the bubble is 100 for example so the whole eye icon becomes hidden with the bubble.