CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
JPD
JPD

Reputation: 29

Overlaying bootstrap label in corner of a div

I'm trying to overlay a bootstrap label in the corner of a DIV.

I'd like to put the label in the top left of the div, like a overlay so part on the div and part off.

Thanks

     <div class="span4" style="border-bottom: none; border-top: 4px solid #28A197;">
           <h3>Quick Links</h3>
      <div class="row">
      <div class="span2">
<div class="quickbtn">
<p><a href="#wirelessnetworkinfo" data-toggle="modal"><img src="images/icons/wirelesssignal.png" /></p>
<p>Wireless Network Information</a></p>
</div>
<br />
<div class="quickbtn">
<p><a href="http://mail.google.com" target="_blank"><img src="images/icons/gmail.png" /></p>
<p>Gmail</a></p>
</div>
      </div>

      </div>
  <span class="label label-important">UPDATED</span>

</div>

Heres the JSFiddle of the coding etc. with example label ready for placement and the CSS for the div in question (button)

Upvotes: 2

Views: 12140

Answers (1)

Mooseman
Mooseman

Reputation: 18891

Using position: relative on .quickbtn and position: absolute on .quickbtn .label, you can absolutely position the label inside .quickbtn.

Fiddle: http://jsfiddle.net/Pq6JL/1/

As your post is not clear, I am adding the following:

If you wanted the label to overhang outside of .quickbtn, set a negative top and left for the position of .label:

.quickbtn .label {
    position:absolute;
    left: -4px;
    top: -3px
}

Fiddle: http://jsfiddle.net/Pq6JL/3/

Upvotes: 4

Related Questions