What is the best way to spin a paragraph in Bootstrap?

I've been attempting to rotate this div by 90 degrees, but for some reason, it refuses to cooperate. I've tried using various bootstrap classes with no success, and even plain CSS doesn't seem to have any effect on it.

#socials {
  transform: rotate(90deg);
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="05676a6a71767177647545312b332b34">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section>
  <div class="container-fluid">
    <svg class="svgOne position-absolute bottom-0 start-1" 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 class="svgTwo position-absolute top-2 start-1" 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 class="fs-4 text-light" id="socials">Socials</div>
  </div>
</section>

Check out this image: see image details here

htmlcssbootstrap-4

Answer №1

Everything appears to be in order, although the transform origin may need adjusting if you intend for the text to be displayed within the black SVG areas. To make it clearer, I have modified the background color of the HTML and body elements.

#socials {
  transform: rotate(90deg);
  transform-origin: bottom left;
}
html, body { background-color: #333; }
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1c3ceced5d2d5d3c0d1e1958f978f90">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section>
  <div class="container-fluid">
    <svg class="svgOne position-absolute bottom-0 start-1" 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 class="svgTwo position-absolute top-2 start-1" 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 class="fs-4 text-light" id="socials">Socials</div>
  </div>
</section>

Answer №2

#socials {
  transform: rotate(-90deg);
}
<article>
  <div class="container-fluid" id="socials">
    <svg class="svgOne position-absolute bottom-0 start-1" 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>
 <div class="fs-4 text-light" >Socials</div>
    <svg class="svgTwo position-absolute top-2 start-1" 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>
</article>

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

Establishing Fixed Positioning

I'm currently working on fixing the position of an image at the top of a mobile view page. .fixed { position: fixed; } This is specifically for use with Ionic. <div class="item item-image polygon"> <img src="http://urbanetradio ...

css

I am looking to pair a unique audio clip with each picture in my collection

I have implemented a random slideshow feature that cycles through numerous images. I am now looking to incorporate a brief audio clip with each image, synchronized with the array I have established for the random pictures. The code snippet below is a simil ...

javascriptarrayshtmlimagehtml5-audio

The beginning of my HTML input is not at the top of the page

I have a query regarding the custom input line I created recently. When I adjust the height of the input, instead of aligning with the top, the text appears vertically centered. Moreover, the text does not wrap to a new line once it reaches the outermost ...

htmlcss

Why is ui-view failing to display the associated template in angular-ui-tab?

Can someone help me troubleshoot why ui-view is not working for ui-tab in my code? Here is what I am experiencing: On the customers page, I have a link that redirects to the update customer page when clicked. The link looks like this: http://localhost:300 ...

javascripthtmlangularjs

Unable to load Webfont Trade Gothics in Internet Explorer 8

The following code is used to ensure proper functionality of webfonts across all browsers: @font-face { font-family: 'TradeGothic-BoldCondensedNo20'; src: url('../fonts/tradegothic/trade-gothic-lt-std-bold-condensed-no-20.eot?' ...

cssinternet-explorer-8cross-browserfont-face

Tips for making a div overlap with Twitter Bootstrap positioning

Currently, I am attempting to utilize Bootstrap 4.5 to position a div over two existing divs. Instead of explaining it through text, the image linked below provides a visual representation of what I am aiming for: https://i.sstatic.net/gbylW.png In this ...

htmlcsstwitter-bootstrap

The synergy between HTML and JavaScript: A beginner's guide to frontend coding

I have primarily focused on server-side development of enterprise applications (Java EE, Spring framework). However, I am now exploring client-side technologies for better understanding (not necessarily to become an expert). I have studied HTML and CSS th ...

javascripthtmlcss

Resolved issue with navigation bar no longer overlapping certain sections of the website

I am in the process of creating a website that will serve as a showcase for my resume and portfolio. However, I am facing an issue with my fixed navigation bar not overlapping certain elements on the page, such as an image and progress bars, when I scroll ...

htmlcssbootstrap-4

How can you ensure an image is centered properly when padding is applied?

Is there a way to center an image without affecting padding around it? Check out this sandbox for reference HTML <div class="imageParent"> <figure id='img-div'> <img class='image card' ...

htmlcss

Tips for exporting an image from a threeJS scene

I am looking to export a 2D image of my scene by simply clicking a button on my HTML page. I have tried adding some code to my function, but unfortunately, it doesn't seem to work and the image is not downloading. (I am using Chrome as my browser) con ...

javascripthtmlthree.js3dexport

What techniques can be used to maintain the alignment of an image while the surrounding text changes?

Having trouble aligning my image without affecting its position. When the wind text is hidden (JavaScript not functioning in CodePen), meaning it is not displayed below the temperature, the weather image shifts upwards. I attempted to use 'absolute&ap ...

htmlreactjstwitter-bootstrapcssbootstrap-4

CSS background image not displaying in ReactJS with SCSS

Currently, I am working on a React project and I am trying to incorporate a local image from a public folder as the background for a div container with transparent color. However, I am facing an issue where the image is not being displayed. I have success ...

cssreactjssassbackground

Steps to disable all fields if the previous field is set to its default value and the default value is currently selected

As a newcomer to AngularJS, I have successfully disabled fields based on previous field selections. However, my goal is to set the default value of "ALL" for all fields (country, state, city). If the country value is set to "ALL," then the state and city ...

htmlangularjs

Styling the Next and Previous Page Links in your WordPress Website

Currently working on developing my own custom Wordpress theme and everything is going well, except for one little detail. I am trying to customize the styling of my next/previous page links so that the next page-link appears on the right side and the previ ...

phphtmlcsswordpress

Display the onclick event of multiple buttons on a web page

I am currently working on extracting the "onclick" attribute (onclick="openDirection( 41.051777,28.986551)") from the first button element within each li element. My goal is to display all of the coordinates. In the provided code snippet, I have been abl ...

pythonhtmlseleniumcss-selectors

Swap out a web link for an embedded iframe

Currently working on updating internal links: <div class="activityinstance"> <a href="http://website.com/hvp/view.php?id=515512">activity</a> </div> The goal is to convert them into: <div class="activityinstance"> ...

javascriptjqueryhtmliframe

Looking for assistance with fundamental HTML concepts

I'm struggling to make the navigation bar stretch to full height. As a beginner in HTML and CSS, I have limited knowledge about it. I have tried numerous solutions found on the internet but nothing seems to work. The styling and HTML code are provide ...

htmlcss

Modifying the color of the Payment Button in a Stripe Pop-up

I have successfully implemented the Stripe payment method on my leadpages, and everything is functioning well. However, I would like to customize the color of the Pay button to match the design in the attached image. https://i.sstatic.net/4mDrH.png Below ...

jqueryhtmlpopupstripe-payments

"Uncovering an issue with locating the 'div' variable in a

I'm facing an issue with the following code snippet: <script> function loadData() { var items = [<?php echo $jsItemArray ?>]; for (i = 0; i < items.length; i++) { var itemId = "\"#item-" +items[i]+ "\""; ...

jqueryhtmlajax

Issue with GridLayout causing rows to be misaligned

As a newcomer to the world of CSS, I found myself in need of a grid layout for a quick project. Here's the mishmash of CSS code I came up with: body { margin: 40px; } .container { display: grid; grid-template-rows: [row1start] 20% [row2sta ...

cssflaskcss-grid