Shawn Taylor Shawn Taylor - 1 month ago 19
CSS Question

overlap notification badge on glyph in Bootstrap 3

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:

Notify

...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

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