Rotate text in Bootstrap in different col sizes
I have a lot of different col sizes, so when I put my code there, the rotated text is different in every column.
CSS
.verticaltext {
position: relative;
}
.verticaltext_content {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
left: -60px;
top: 35px;
position: absolute;
color: #FFF;
text-transform: uppercase;
}
I want to look like this in each column:
+6
user4466220
source
to share
2 answers
Your code is pretty much functional. You haven't included HTML or Bootstrap, of course, so it's a little difficult to figure out exactly where you're having problems. However, here's some CSS with a layout similar to your image layout.
Basically, I added padding to the left of the text and a minimum height so that the text on the left does not overlap. Obviously, both can be adjusted to suit your needs.
body {
background: #000;
color: #fff;
font-family: Arial, sans-serif;
}
.verticaltext {
position: relative;
padding-left: 50px;
margin: 1em 0;
min-height: 120px;
}
.verticaltext_content {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
left: -40px;
top: 35px;
position: absolute;
color: #FFF;
text-transform: uppercase;
font-size: 26px;
font-weight: bold;
}
Here is a Violin with a demo.
+8
source to share
Easiest way to solve with Bootstrap Extension.
<div class="container o-hidden">
<div class="row">
<div class="col-12 col-sm-6 col-sm-push-4 rotate-sm-l-90">
<p class="display-6">Some text</p>
<hr class="bg-dark">
</div>
<div class="col-12 col-sm-6">
<img class="w-100 mt-5" src="sample1.jpg" alt="sample1">
</div>
</div>
</div>
More details: http://bootstrap-extension.com/#content-rotate
+1
source to share