overlap notification badge on glyph in Bootstrap 3

Question

I\'m trying to create a comment/notification setup in bootstrap, and can\'t seem to get the alignment right.

I\'m going for a pretty common layout as in this screenshot:

Answer 1

For dynamism, I'd like to mention the usage of transform instead of relying on trial/error of pixels (which might still be of your use, depending on the use case)

  
    
  
  3


.badge-notify{
   background:red;
   position:relative;
   transform: (-100%, -100%);
}

This will position the badge just touching to the button. Depending on how much overlapping you want, decrease the x value. eg., for half of the badge - transform: (-150%, -100%) would be ideal.