Adding a bootstrap label on the corner of a div using overlay technique

I'm attempting to superimpose a bootstrap label in the corner of a DIV.

My goal is to position the label in the top left corner of the div, partially overlapping it.

Thank you

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

Here is the JSFiddle link with example label preparation for positioning and the CSS settings for the specified div (button)

htmlcsstwitter-bootstrap

Answer №1

To achieve an absolute positioning of the label inside the element with the class "quickbtn", you can use position: relative on .quickbtn and position: absolute on .quickbtn .label.

Check out this demo in the Fiddle: http://jsfiddle.net/Pq6JL/1/

Since your question is a bit unclear, I will provide additional information:

If you prefer to have the label extend beyond the boundaries of .quickbtn, you can adjust the position by setting a negative value for top and left properties within .label:

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

Here is the updated Fiddle link to see it in action: http://jsfiddle.net/Pq6JL/3/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Access SCSS variable values in Angular HTML or TypeScript files

So, I've been looking into whether it's feasible to utilize the SCSS variable value within HTML or TS in Angular. For instance: Let's say I have a variable called $mdBreakpoint: 992px; stored inside the _variable.scss file. In my HTML cod ...

javascriptcssangulartypescriptsass

Ensure the header remains fixed when scrolling in an HTML page with Bootstrap

I created the following code. However, when I scroll down the table, the header disappears from view. I would like the header to always remain at the top, even when scrolling. Despite searching Google multiple times and trying various solutions, I have no ...

javascripthtmlcsstwitter-bootstrap

CSS Styling Dropdown Menu for Internet Explorer 5 and Internet Explorer 11

I am encountering an issue with a select box that is coded as follows: <html:select property="list_data" size="12" style="width: 350px;" ondblclick="JavaScript:doOK()"> <html:optionsCollection property="list_data" label="codeAndNameLabel" val ...

htmlcssinternet-explorer-11

Align two divs with text in the center

I am having trouble centering two divs horizontally and aligning them between each other. The issue arises when I add text of different sizes in each div. Here is an example: http://jsfiddle.net/DgEcs/1/ Why does the red div move down and how can this be ...

css

Seeking assistance with setting up BxSlider installation

I'm struggling with adding bxslider to my HTML template. No matter what I try, the slider doesn't work as expected. When I preview my website, all three images are displayed together in a single column. Can someone please guide me on how to fix t ...

javascriptjqueryhtmlcss

Issues with loading times and the rendering of textures in ThreeJS

Having imported a 3D chair object from Blender into ThreeJS, I am encountering some issues. Firstly, the load time is over 40 seconds, which seems excessively long and may be related to Visual Studio. Additionally, the textures of the image are not loadi ...

htmljsoncanvasthree.jswebgl

Styling the scroll bar within a fixed parent container's inner div with CSS

Check out the JSBIN link here: JSBIN The modules container has a fixed height of 100%. I am attempting to make the list items scroll while keeping the search div fixed within the wrapper container, ensuring that the search bar remains visible at all times ...

css

Attempting to change the primary color in Bootstrap is ineffective following a button click

I have been attempting to customize the primary color of Bootstrap 5 using SCSS. Everything works perfectly until I click a button that opens an external link. Below is the content of my SCSS file: $primary: #ae217aff; @import "../node_modules/boots ...

javascripthtmlcsssassbootstrap-5

When utilizing narrow resolutions, header letters may overlap each other

As I integrate bootstrap into my website, I've noticed that when the resolution is narrow, my header overlaps. If the header is of a small size, like the typical H1 size, everything looks fine. However, when using a larger size (see CSS below), the is ...

htmlcssfont-size

Ways to layer two divs on each other and ensure button functionality is maintained

In the process of developing a ReactJS project, I encountered the challenge of overlapping my search bar autocomplete data with the result div located directly below it. For a more detailed understanding, please take a look at the provided image. Here&apo ...

javascriptreactjscss

Tips for dynamically loading a modal

Hello, I am curious about dynamically loading modals on different images within my current webpage. For example, when the life of Pi image is clicked, a modal pops up displaying relevant information. I would like this functionality to extend to other ima ...

javascriptjquerycsshtml

How can I ensure that the search form stays aligned with the other elements in the navbar using Bootstrap CSS?

I am new to CSS and I am facing an issue with my search form in the navbar. When I initially load the page, the search form appears on 2 lines but when I refresh the page, it aligns properly with the other elements. How can I ensure that the search form st ...

csstwitter-bootstrap

Modify the class of button after receiving a successful ajax response

Using Bootstrap, I have a button and span element. When the button is clicked, an ajax function is called. If the result is successful, I want to change the button's class, text, and the span's class. The classes are changing but not working corr ...

jqueryajaxtwitter-bootstrap

Can a JavaScript function be used with images to operate across multiple elements?

How can I make a function work on multiple elements? let image = document.getElementById("opacityLink"); image.onmouseover = function() { image.style = "opacity:0.9"; }; image.onmouseout = function() { image.style = "opacity:1"; }; <div class=" ...

javascripthtmlcssimage

Content in TinyMCE styled with the default CSS of the application

Hello fellow developers; I'm struggling to find a suitable solution to apply the same styles from our main CSS file to the text entered in the TinyMCE editor. Just to clarify, I don't want to alter the overall theme or appearance of TinyMCE itse ...

javascripthtmlcsstinymcetinymce-4

The pseudo-class for invalid input triggers CSS invalidation, even when the input field is left blank

The input property for handling invalid input is currently malfunctioning. It triggers an error even when the input field is left empty. I would like the input border to be goldenrod when it's empty, turn red if the input doesn't match the specif ...

htmlcssreactjs

When the page first loads, the slider is responsive, but it does not adjust

I installed the Moving Boxes plugin and customized it to create a full-width image slider. While it works well when the page loads, I'm facing challenges with making it responsive on resize. It appears that the JS script sets fixed widths upon load, w ...

javascriptjquerycsssliderresponsive-design

Difficulty switching back and forth between three varying heights

I have a container with a button labeled "Show more". Upon clicking the button, the height of the container will transition through 3 different states. <div class="segment-suggestion-content height-small"> <div class="segment-suggestion-sh ...

javascriptjquerycss

Tips for styling Pandas dataframe using IPython HTML display

Is there a way to customize the display of pandas dataframes in IPython html format? I want to achieve the following: Have numbers right justified Add commas as thousands separators for numbers Show large floats without decimal places I am aware that nu ...

pythonhtmlpandasipython

What steps should I take to establish an efficient folder organization system for a website utilizing HTML, CSS, and Javascript with Twitter Bootstrap?

After cloning the latest release of Twitter Bootstrap using Git with the command 'git clone git://github.com/twbs/bootstrap.git', I am in the process of creating an HTML/CSS site utilizing Bootstrap. Upon reviewing this answer on Stack Overflow ( ...

csshtmltwitter-bootstrap-3