"CSS Badge over image"
Bootstrap 4.1.1 Snippet by basirsharif

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="col-sm-4"> <div class="item"> <a href="#"> <span class="notify-badge">NEW</span> <img src="http://placehold.it/200x200" alt="" /> </a> </div> </div>
.item { position:relative; padding-top:20px; display:inline-block; } .notify-badge{ position: absolute; right:-20px; top:10px; background:red; text-align: center; border-radius: 30px 30px 30px 30px; color:white; padding:5px 10px; font-size:20px; }

Related: See More


Questions / Comments: