I am trying to put a text/title on top of a div. I indicate it in red in the image but I can't do it.

My image

My code:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div >

  <div >

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

    </div>

  </div>

</div>

Thank you

I have tried with the label tag but it scrolls everything.

CodePudding user response：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div >
  <div >
    <div >
      <img src="assets/icons/intercambiar.png" alt="intercambiar" />
    </div>
    <div >
      <label>text 1</label>
      <div  style="background-color: rgb(22, 111, 212); color: white">
        01-15-12-03
      </div>
    </div>
    <div >
      <label>text 2</label>
      <div  style="background-color: rgb(255, 255, 255); color: black">
        01-15-12-03
      </div>
    </div>
  </div>
</div>

CodePudding user response：

Add another row div before your content and add your labels

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div >
  <div >
      <div ></div>
      <div >Label 1</div>
      <div >Label 2</div>
  </div>
  <div >

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

    </div>

  </div>

</div>

CodePudding user response：

You can do it with the ::before attribute in CSS:

.div::before{
    content: "[YOUR TEXT]";
    top: -50px;
    left: 50px;
}

You have to adjust the top and left to your div.