Adding number label on top of an image

Question

EDIT

I've added this css to span.label using this fiddle

span.label{

        width:100px; color:#FFFFFF; 
        background-color:#F43B05; 
        float:right; padding:3px; 
        position:absolute; top:50px; left:5px;
}

And I've got this:

I need to put a label on an image using bootstrap.

I have this image with a label:

And here is the code for it:

<span class="label label-success">4</span>

<input class="img1" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="oone" name="one" alt="button"/>

<div title="3rd Molar - Upper Rigth Jaw" id="div_one" class="collapse"><?php echo $resTeeth['one'] ?>

</div>

But this is not what I want. What I want is to add this number 4 green label on top of the image and not on the side of it.

I tried this:

<span class="label label-danger">4
<input class="img1" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="oone" name="one" alt="button"/>
<div title="3rd Molar - Upper Rigth Jaw" id="div_one" class="collapse"><?php echo $resTeeth['one'] ?>
</div>
</span>

And I've got this:

You could put the span inside the relative positioned div and then position the span absolute. You could also do it with css, using :after with the number "4" as content. — Goombah, Mar 30 '16 at 08:06

score 1 · Answer 1 · edited Mar 30 '16 at 08:12

1

Just use float:left for span.label and then set margins to set the position of the label element.

edited Mar 30 '16 at 08:12

StudioTime

22,603
38
120
207

answered Mar 30 '16 at 08:03

pzworks

165
2
8

CSS: span.label { display:block; float:left; margin-bottom: //here type your pixel value margin-left: //here type your pixel value } – pzworks Mar 30 '16 at 08:05

score 1 · Accepted Answer · answered Mar 30 '16 at 08:09

I am sure this will be your answer. Thanks

/* CSS used here will be applied after bootstrap.css */
.badge-notify{
   background-color:red !important;
   position:relative;
   top: -20px;
   left: -35px;
  }

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

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

score 1 · Answer 3 · answered Mar 30 '16 at 08:13

1

try this:

<div class="container">
   <img src="" />
   <span class="lbl">something</span>
</div>

.container{
position:relative;
}
.container img, .container .lbl{
position:absolute;
top:0px;
left:0px;
}

answered Mar 30 '16 at 08:13

Alex Poon

101
4
14

score 1 · Answer 4 · answered Mar 30 '16 at 08:19

I've made two examples here, like the ones I suggested in the comments.

JSFiddle

div
{
  position: relative;
  width: 300px;
  height: 300px;
}

span
{
  position: absolute;
 background: red;
  color: white;
  height: 60px;
  width: 60px;
  text-align: center;
  font-family: Tahoma, sans-serif;
  font-size: 40px;
  line-height: 55px;
  border-radius: 10px;
  bottom: 0;
  right: 0;
}  

.icon
{
  position: relative;
}

.icon:after
{
  content:"4";
  position: absolute;
  display: block;
  background: red;
  color: white;
  height: 60px;
  width: 60px;
  text-align: center;
  font-family: Tahoma, sans-serif;
  font-size: 40px;
  line-height: 55px;
  border-radius: 10px;
  bottom: 0;
  right: 0;
}

Adding number label on top of an image

4 Answers4

Linked