Rotate Text in Bootstrap in Different Col Sizes

Rotate Text in Bootstrap in different col sizes

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.

How to Vertically Bootstrap's List Group Text

try this:

.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;
}

your html structure will look like this:

<div class="verticaltext">
  <div class="verticaltext_content">Test 12</div>
</div>

you will need to set an absolute position in order to rotate the element in this case <li></li>. follow this link for further clarification

Can't get rotated text aligned in Bootstrap 4 Grid

Instead of "rotate-sm-l-90" class i added custom css for labels.

.vertical-label {
transform: rotate(-180deg);
writing-mode: vertical-lr;
padding: 16px;

}

Here is the result

how to rotate text left 90 degree and cell size is adjusted according to text in html

You can do that by applying your rotate CSS to an inner element and then adjusting the height of the element to match its width since the element was rotated to fit it into the <td>.

Also make sure you change your id #rotate to a class since you have multiple.

A 4x3 table with the headers in the first column rotated by 90 degrees

$(document).ready(function() {  $('.rotate').css('height', $('.rotate').width());});

td {  border-collapse: collapse;  border: 1px black solid;}tr:nth-of-type(5) td:nth-of-type(1) {  visibility: hidden;}.rotate {  /* FF3.5+ */  -moz-transform: rotate(-90.0deg);  /* Opera 10.5 */  -o-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */  -webkit-transform: rotate(-90.0deg);  /* IE6,IE7 */  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE8 */  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";  /* Standard */  transform: rotate(-90.0deg);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table cellpadding="0" cellspacing="0" align="center">  <tr>    <td>      <div class='rotate'>10kg</div>    </td>    <td>B</td>    <td>C</td>    <td>D</td>    <td>E</td>  </tr>  <tr>    <td>      <div class='rotate'>20kg</div>    </td>    <td>G</td>    <td>H</td>    <td>I</td>    <td>J</td>  </tr>  <tr>    <td>      <div class='rotate'>30kg</div>    </td>    <td>L</td>    <td>M</td>    <td>N</td>    <td>O</td>  </tr>

</table>

Rotate text -90deg and vertically align with div

In the end, I've had to give up on the CSS front and generate the titles as transparent PNGs using GD. Not ideal, but gives me a lot more flexibility in terms of positioning. If anyone is interested in the rotation script I'm using, it's below

define("DEFAULT_FONT", "fonts/BebasNeue-webfont.ttf");
define("DEFAULT_COLOR", "ed217c");
define("DEFAULT_SIZE", 24);
define("DEFAULT_ANGLE", 0);
define("DEFAULT_PADDING", 10);
define("DEFAULT_SPACING", 0);

$text = $_GET['text'];
if(isset($_GET['transform'])):
    switch ($_GET['transform']){
        case 'uc':
            $text = strtoupper($_GET['text']);
            break;

        case 'lc':
            $text = strtolower($_GET['text']);
            break;

        case 'ucf':
            $text = ucfirst($_GET['text']);
            break;

        case 'ucw':
            $text = ucwords($_GET['text']);
            break;
    }
endif;

$font = $_GET['font'] ? $_GET['font'] : DEFAULT_FONT;
$color = (strlen($_GET['color']) == 6 && ctype_alnum($_GET['color']))  ? "0x" . $_GET['color'] : "0x" . DEFAULT_COLOR;
$size = (is_numeric($_GET['size'])) ? $_GET['size'] : DEFAULT_SIZE;
$angle = (is_numeric($_GET['angle'])) ? $_GET['angle'] : DEFAULT_ANGLE;
$padding = (is_numeric($_GET['padding'])) ? $_GET['padding']*4 : DEFAULT_PADDING*4;
$spacing = (is_numeric($_GET['spacing'])) ? $_GET['spacing'] : DEFAULT_SPACING;
$text_dimensions = calculateTextDimensions($text, $font, $size, $angle, $spacing);
$image_width = $text_dimensions["width"] + $padding;
$image_height = $text_dimensions["height"] + $padding;

$new_image = imagecreatetruecolor($image_width, $image_height);
ImageFill($new_image, 0, 0, IMG_COLOR_TRANSPARENT);
imagesavealpha($new_image, true);
imagealphablending($new_image, false);
imagettftextSp($new_image, $size, $angle, $text_dimensions["left"] + ($image_width / 2) - ($text_dimensions["width"] / 2), $text_dimensions["top"] + ($image_height / 2) - ($text_dimensions["height"] / 2), $color, $font, $text, $spacing);
imagepng($new_image);
imagerotate($new_image, 90, 0);
imagedestroy($new_image);

function imagettftextSp($image, $size, $angle, $x, $y, $color, $font, $text, $spacing = 0)
{
    if ($spacing == 0)
    {
        imagettftext($image, $size, $angle, $x, $y, $color, $font, $text);
    }
    else
    {
        $temp_x = $x;
        for ($i = 0; $i < strlen($text); $i++)
        {
            $bbox = imagettftext($image, $size, $angle, $temp_x, $y, $color, $font, $text[$i]);
            $temp_x += $spacing + ($bbox[2] - $bbox[0]);
        }
    }
}

function calculateTextDimensions($text, $font, $size, $angle, $spacing) {
    $rect = imagettfbbox($size, $angle, $font, $text);
    $minX = min(array($rect[0],$rect[2],$rect[4],$rect[6]));
    $maxX = max(array($rect[0],$rect[2],$rect[4],$rect[6]));
    $minY = min(array($rect[1],$rect[3],$rect[5],$rect[7]));
    $maxY = max(array($rect[1],$rect[3],$rect[5],$rect[7]));
    $spacing = ($spacing*(strlen($text)+2));
    return array(
        "left"   => abs($minX) - 1,
        "top"    => abs($minY) - 1,
        "width"  => ($maxX - $minX)+$spacing,
        "height" => $maxY - $minY,
        "box"    => $rect
    );
}
    header("content-type: image/png");

Modified from Jason Lau's awesome script, which can be found here.

Rotate text 90° with the resulting div having position within parent

writing-mode might be much more efficient here .

possible update with less html and more boostrap classes

.emptydropzone {  min-height: 10vh;  border: 1vh dashed #000;  border-radius: 1vh;  background-color: #CCC;}
.taflag {  width: 98%;  min-height: 50px;  margin: 10px 125px 10px 5px;  padding: 10px 10px 10px 10px;  border: 5px solid #90C;  border-radius: 5px;  background-color: #90C;  color: #FFF;  font-size: xx-large;  font-weight: bolder;}
.rotateparent {  background: yellow;  padding: 10px 0;}
.agentflag {  writing-mode: vertical-lr;  transform: scale(-1, -1);  /* untill   writing-mode:sideways-lr; works everywhere */  margin: auto;  border: 5px solid #F00;  border-radius: 5px;  background-color: #F00;  color: #FFF;  font-size: xx-large;  font-weight: bolder;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<body>
  <div class="container-fluid">    <div class="row">      <div class="col-12">        <div class="row">          <div class="col-2">            <div class="taflag"> TA </div>          </div>          <div class="col-10">            <div class="emptydropzone" id="ta"> </div>          </div>        </div>        <div class="row">
          <div class="col-2 d-flex rotateparent m-0">            <div class="agentflag m-auto"> AGENTS </div>          </div>
          <div class="col-10 d-flex flex-column justify-content-around">
            <div class="emptydropzone" id="agent1"> </div>            <div class="emptydropzone" id="agent2"> </div>            <div class="emptydropzone" id="agent3"> </div>            <div class="emptydropzone" id="agent4"> </div>
          </div>        </div>      </div>    </div>  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Rotate Text in Bootstrap in Different Col Sizes