title: overlap notification badge on glyph in Bootstrap 3
body: <p>I'm trying to create a comment/notification setup in bootstrap, and can't seem to get the alignment right.</p>
  
  <p>I'm going for a pretty common layout as in this screenshot:</p>
  
  <p><img src="https://i.stack.imgur.com/fok0E.jpg" alt="Notify"></p>
  
  <p>...but I can't get it to lignup. <strong><a href="http://www.bootply.com/7o1VlsuzxY" rel="noreferrer">Here's a Bootply</a></strong> of my attempt.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;button class="btn btn-default btn-lg btn-link" style="font-size:36px;"&gt;
      &lt;span class="glyphicon glyphicon-comment"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;span class="badge badge-notify"&gt;3&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.badge-notify{
     background:red;
     position:absolute;
     top:0px;
    }
  </code></pre>