One Bootstrap column with vertical text - html

Question

I would like to put "VERTICAL_TEXT" (third bootstrap column) with 90º rotation.
I have tried the following code:
<div class="row">
<div class="col-xs-2" style="background-color: yellow;">
<span>FOO1</span><br/>
<span>FOO2</span>
</div>
<div class="col-xs-8" style="background-color: red;">
<div>
<span>BAR1</span><br/>
<span>BAR2</span><br/>
<span>BAR3</span><br/>
<span>BAR4</span><br/>
</div>
</div>
<div class="col-xs-2" style="background-color: blue;">
<span class="rotate_text">VERTICAL TEXT</span>
</div>
</div>
.text_rotate {
/* Safari */
-webkit-transform: rotate(90deg);
/* Firefox */
-moz-transform: rotate(90deg);
/* IE */
-ms-transform: rotate(90deg);
/* Opera */
-o-transform: rotate(90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
The following fiddle ilustrates the issue:
https://jsfiddle.net/fbtg1zjx/
Edited:
I included the inline-block style and the text is now rotated as suggested in answers, however the text does not start in the upper part of the document. (the whole text includes 4 characters before N/00001. In green it is the span item, in blue the parent div.

Answer 1

You should put the text_rotate on the parent div.

Answer 2

Many CSS rules including Width, Height and such transforms doesn't work on elements with display:inline, an span is by default an inline elemnt, just give it a display:block or inline-block and it should work for you..
also try to add a general transform rule , transform:rotate(90deg);
to fix the second issue where the text is outside of the container you can use following CSS fixes :
.text_rotate {
/* add translate(50%) to transforms */
-webkit-transform: rotate(90deg) translate(50%);
-moz-transform: rotate(90deg) translate(50%);
-ms-transform: rotate(90deg) translate(50%);
-o-transform: rotate(90deg) translate(50%);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
transform: rotate(90deg) translate(50%);
display:block;
}
or use transform origin
.text_rotate {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
transform: rotate(90deg);
display:block;
transform-origin: 0% 50%;
}
Please test and see which one is better for your situation.
Hope it helps