Place the written content above a div element

Having trouble placing a text/title on top of a div. I've highlighted the issue in red in the image, but can't seem to figure it out.

Check out my image

This is my code:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="781a17170c0b0c0a1908384d564a564b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">

  <div class="row">

    <div class="col col-md-1">
      <img src="assets/icons/intercambiar.png" alt="intercambiar" />
    </div>
    <div class="col col-md-4 border border-white border-4" style="background-color: rgb(22, 111, 212); color: white;"> 01-15-12-03
    </div>
    <div class="col col-md-4 border border-white border-4" style="background-color: rgb(255, 255, 255); color: black;">

    </div>

  </div>

</div>

Any advice would be appreciated.

I've attempted using the label tag, but it seems to mess everything up.

htmlcssbootstrap-5

Answer №1

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dab8b5b5aea9aea8bbaa9aeff4e8f4e9">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col col-md-1">
      <img src="assets/icons/intercambiar.png" alt="intercambiar" />
    </div>
    <div class="col col-md-4">
      <label>text 1</label>
      <div class="border border-white border-4" style="background-color: rgb(22, 111, 212); color: white">
        01-15-12-03
      </div>
    </div>
    <div class="col col-md-4">
      <label>text 2</label>
      <div class="border border-white border-4" style="background-color: rgb(255, 255, 255); color: black">
        01-15-12-03
      </div>
    </div>
  </div>
</div>

Answer №2

Insert a new row div above your content and include your labels

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="02606d6d76717670637242372c302c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
      <div class="col col-md-1"></div>
      <div class="col col-md-4">Label 1</div>
      <div class="col col-md-4">Label 2</div>
  </div>

  <div class="row">
    <div class="col col-md-1">
      <img src="assets/icons/intercambiar.png" alt="intercambiar" />
    </div>
    <div class="col col-md-4 border border-white border-4" style="background-color: rgb(22, 111, 212); color: white;"> 01-15-12-03
    </div>
    <div class="col col-md-4 border border-white border-4" style="background-color: rgb(255, 255, 255); color: black;">

    </div>

  </div>

</div>

Answer №3

Using the ::before pseudo-element in CSS allows you to achieve this:

.container::before{
    content: "[INSERT YOUR TEXT HERE]";
    top: -30px;
    left: 70px;
}

Make sure to customize the positioning values according to your specific container.

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

Having trouble displaying nested routes in Angular within the view

I'm encountering some issues with child/nested routes in Angular 4. In the app.module.ts file, my imports statement looks like this: RouterModule.forRoot([ { path: 'templates', component: TemplateLandingC ...

htmlangulartypescriptsingle-page-applicationangular-router

What is the best way to obtain a date in the format of yyyy_mm_dd from a datepicker tool?

I am working with 2 datepickers that have similar structures, but different names. The first one has the id "fecha_1_1" and the second one has the id "fecha_1_2". <div class="col-sm-3"> <p>Desde</p> <div class="f ...

javascripthtmlajaxtwitter-bootstrap-3datepicker

text breaks free from the flex container when zooming in

Hi, I am attempting to design a user card-type div that includes images on the left and the username on the right. I have managed to create the layout, but when zooming in, the text is overflowing and escaping the flex container. Here is my code snippet. Y ...

htmlcssflexbox

Convert a div into a clickable link using JavaScript without using too many classes or any ids

After using shortcodes generated by functions.php in a WordPress parent theme, I have come across the following HTML code: <div class="pricing-table-one left full-width "> <div class="pricing-table-one-border left"> <div class=" ...

javascriptjqueryhtmlcss

Having issues with jQuery Checkbox Selector and .attr('checked) function not functioning correctly?

I'm trying to assign the value of a variable as true or false based on the selected checkbox. However, the code I have is not working as expected. <input type="checkbox" id="chkBox1"> var chkBox1Val = $('#chkBox1').prop('checked ...

javascriptjqueryhtmlcsscheckbox

I'm struggling to locate the space that should be between these elements

After accidentally starting in quirks mode without declaring a doctype, I realized my mistake and corrected it by declaring a doctype. However, there is a persistent issue with a space between .car-box-img and car-box that I can't seem to locate in t ...

htmlcss

How to Customize a Jquery Mobile Panel

As I work on my first Jquery Mobile application, I have successfully implemented a panel for navigation. Inside the panel, I am using an unordered list (<ul><li>home</li><li>search</li><li>... etc</li></ul>) ...

jquerycsshtmljquery-mobile

How can I prevent my mouse click from being overridden by my mouse hover?

Currently, I am developing a Sudoku game using JavaScript and facing some challenges with mouse events. My goal is to enable users to hover over a square and have it change color, as well as click on a square to highlight the entire row, column, and quadra ...

javascripthtml

hide the scroll button when at the top of the page and hide it when at the bottom

Looking to create a vertical scroll that hides the up button when at the top and hides the down button when at the bottom? Jquery can help with this, but sometimes it's tricky to get it just right. Take a look at an example here. Below is the code sn ...

jqueryhtmlcssscroll

Submitting numerous data fields using a post AJAX call

I have roughly 143 form fields including text, textarea, and select options that I need to send via an AJAX post request. Is there a way to achieve this efficiently without manually adding each field to the query? Here is how I've set things up: Usi ...

phpjqueryhtmlajaxpost

Issue with AdminLite 2.4.0 data table functionality malfunctioning

Check out this template that I'm using. I've copied all the contents for the bower_components and dist folders, and made sure to link and require everything properly. There are no 404 errors, only status code 200. Here is a snippet of my code: ...

javascriptjquerycsstwitter-bootstrapadminlte

Effortlessly showcase JSON data in an HTML owl carousel

Is there a way to display JSON data in HTML format? I have a JSON file containing reviews from Facebook, and I would like to showcase them on my website. Each review should be placed in its own div element. The JSON data below is extracted from the Faceboo ...

javascriptjqueryhtmljsonajax

Troubleshooting problem with CSS hover effect on background images

Can anyone assist me with creating a simple mouse hover effect on these two images? I am having trouble getting it to work. I am looking for a fade transition to occur when the mouse is over the images. Thank you in advance! * { padding: 0; margin: ...

htmlcsstransitionmousehover

Transforming a string into an onclick event handler using JavaScript

Looking for assistance with assigning the literal content of the variable ElementAction to an onclick handler of a different HTML element. Despite attempting HTMLElement.onclick = ElementAction, it doesn't seem to be working as expected. Any guidance ...

javascripthtml

Trouble with CSS: Struggling to apply margins to a line of images in React JS

I've encountered an issue where I can't seem to add margin to the row of images. The margin appears fine without any CSS when viewed on a wide screen, but once I scale it down to mobile view, the margin disappears completely. Even after attemptin ...

cssreactjssassflexbox

I'm struggling to understand how to insert the JSON response into an HTML element

I am encountering an issue with my code where the response from the API call is not displaying on the HTML page. I'm unsure why it's not showing up even though the page loads successfully. <!DOCTYPE html> <html> <head> <title ...

javascripthtmlnode.js

The switch case functionality refuses to change when I interact with the user interface

Can someone please help me troubleshoot? I'm not receiving any errors in the Chrome console. HTML <div class="wrapper"> <i id="repeat" class="fas fa-stop-circle"></i> </div> Javascript const wrap ...

javascripthtml

Align the outer margin to auto without aligning the justify content center outer

Unable to center outer div when using justify-content:flex-start and margin 0 auto Attempted to align content starting from the left in each row with justify-content:flex-start for items and the outer div horizontally centered to position the container in ...

htmlbootstrap-5

Adjusting the size of the post title's font

Looking to decrease the font size of the latest post's title and keep it centered on my Jekyll based blog. I attempted to adjust https://github.com/x0v/x0v.github.io/blob/master/_sass/atoms/_feature-title.scss by adding font-size: 45px !important; f ...

cssfrontendjekyllscss-lint

The svh/lvh units are experiencing unexpected issues when using Chrome on an iPhone

I'm facing an issue with my hero section that is supposed to take up the full height of the viewport. I recently tried using the new svh/lvh units, which seemed to work fine on desktop and Safari for mobile. However, when testing on Chrome for mobile ...

cssnext.jsmobilematerial-uiviewport