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

I'm sharing the point of view that transform is a better way to do this task. However, I offer you these snippets to make this approach work:

    

      
        
      
      3
    

   .badge-notify{
     background:red;
     position:relative;
     -moz-transform: translate(-100%, -100%); /* For Firefox */
     -ms-transform: translate(-100%, -100%); /* for IE */
     -webkit-transform: translate(-100%, -100%); /* For Safari, Chrome, iOS */
     -o-transform: translate(-100%, -100%); /* For Opera */

Tip: it might be useful to play with percentage values inside translate's brackets for the best result. Moreover, you can try using many other effects like 3D, rotating and so on.