[ACCEPTED]-overlap notification badge on glyph in Bootstrap 3-twitter-bootstrap-3
Accepted 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
0
I'm sharing the point of view that transform is a 7 better way to do this task. However, I offer 6 you these snippets to make this approach 5 work:
<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>
.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 4 percentage values inside translate's brackets 3 for the best result. Moreover, you can try 2 using many other effects like 3D, rotating 1 and so on.
Source:
stackoverflow.com
More Related questions
Cookie Warning
We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.