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:

...but I can't get it to lignup. Here's a Bootply of my attempt.

HTML:

<div class="container">   <button class="btn btn-default btn-lg btn-link" style="font-size:36px;">     <span class="glyphicon glyphicon-comment"></span>   </button>   <span class="badge badge-notify">3</span> </div> 

CSS:

.badge-notify{    background:red;    position:absolute;    top:0px;   } 

Answer 1

Try this:

/* CSS used here will be applied after bootstrap.css */ .badge-notify{    background:red;    position:relative;    top: -20px;    left: -35px; }   <div class="container">   <button class="btn btn-default btn-lg btn-link" style="font-size:36px;">     <span class="glyphicon glyphicon-comment"></span>   </button>   <span class="badge badge-notify">3</span> </div> 

Bootply: http://www.bootply.com/7teIvGLIzY