how do i rotate a paragraph in bootstrap-CodePudding

I am trying to rotate this div 90 degrees but it doesn't seem to be working. There is no bootstrap class to do it and css isn't doing anything to it

#socials {
  transform: rotate(90deg);
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section>
  <div >
    <svg  width="13" height="334" viewBox="0 0 13 100" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="13" height="334" fill="black"/>
    </svg>
    <svg  width="13" height="176" viewBox="0 0 13 100" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="13" height="176" fill="black"/>
    </svg>
    <div  id="socials">Socials</div>
  </div>
</section>

Here is an image: enter image description here

CodePudding user response：

#socials {
  transform: rotate(-90deg);
}

<section>
  <div >
    <svg  width="13" height="334" viewBox="0 0 13 100" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="13" height="334" fill="black"/>
    </svg>
    <svg  width="13" height="176" viewBox="0 0 13 100" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="13" height="176" fill="black"/>
    </svg>
    <div  id="socials">Socials</div>
  </div>
</section>

CodePudding user response：

Looks fine to me, but your transform origin seems off if you want the text inside the black svg areas. I changed the html/body color just so you can see it better.

#socials {
  transform: rotate(90deg);
  transform-origin: bottom left;
}
html, body { background-color: #333; }

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section>
  <div >
    <svg  width="13" height="334" viewBox="0 0 13 100" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="13" height="334" fill="black"/>
    </svg>
    <svg  width="13" height="176" viewBox="0 0 13 100" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="13" height="176" fill="black"/>
    </svg>
    <div  id="socials">Socials</div>
  </div>
</section>