CODEWITHSUNDEEP
htmlcssbootstrap-4
Febry Aryo
Febry Aryo

Reputation: 41

How to Vertically Bootstrap's List Group Text

I want to display the text vertically. I've tried a tutorial that has text rotation. But it lefts space in right side. This is a code that I've to try and mixed with a little piece of code from the tutorial:

1. STYLE:

.list-group-item {
   background: black;
}

.list-group {
   text-align: center;
   -webkit-transform-origin: 100% 0;
   -moz-transform-origin: 100% 0;
   -o-transform-origin: 100% 0;
   transform-origin: 100% 0;
   -webkit-transform: translate(-100%, 0) rotate(-90deg);
   -moz-transform: translate(-100%, 0) rotate(-90deg);
   -o-transform: translate(-100%, 0) rotate(-90deg);
   transform: translate(-100%, 0) rotate(-90deg);
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

2. LIST:

<ul class="list-group">
   <li class="list-group-item">A</li>
   <li class="list-group-item">B</li>
   <li class="list-group-item">C</li>
   <li class="list-group-item">D</li>
   <li class="list-group-item">E</li>
</ul>

3. GOAL:

enter image description here

4. RESULT:

enter image description here

Upvotes: 0

Views: 92

Answers (1)

Nelson SUle
Nelson SUle

Reputation: 394

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

Upvotes: 1

Related Questions