css - Rotate Text in Bootstrap in different col sizes

Question

I'm having a lot of different col sizes, so when I place my follow code in there, the rotated text is different in every col.

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 it like this in every col:

Answer 1

Your code is pretty much functional. Of course, you have not included any HTML, or Bootstrap for that matter, so it's a little hard to decipher where exactly you are having trouble. That said, here's a little CSS with a layout similar to that of your image.

I've essentially added a padding to the left of the text and a minimum height so the text on the left won't overlap. Obviously, both may have to be adjusted to fit you 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 Fiddle with a demonstration.