Tips for Aligning List Group Text Vertically Using Bootstrap

I'm looking to display text vertically on a webpage. I followed a tutorial that involved text rotation, but it ended up leaving space on the right side. Here is the code snippet I tried, incorporating some elements from the tutorial:

1. STYLING:

.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. OBJECTIVE:

https://i.sstatic.net/qLbvL.png

4. OUTCOME:

https://i.sstatic.net/BEICr.png

htmlcssbootstrap-4

Answer №1

give this a try:

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

when you apply this CSS, your HTML setup should resemble this structure:

<div class="verticaltext">
  <div class="verticaltext_content">Demo Text</div>
</div>

for proper rotation of the text within an element like <li></li>, ensure an absolute positioning is set. Refer to this URL for more guidance

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Submit a form to the same page without reloading and toggle the visibility of a div after submission

Is there a way to submit a form without refreshing the page and hiding the current div while showing a hidden one? I attempted to use the following code, but it ends up submitting the form and reloading the page. <form method="post" name="searchfrm" a ...

phpjavascripthtml

The nested elements are not triggering the jQuery on click function

When I attempt to retrieve the attributes of the parent element from a clicked element, I run into issues with dynamically added elements via jQuery. Below is the code snippet for the click event that is not functioning as expected: $("body").on('cli ...

javascriptjqueryhtmlcss

How can I stack two images on top of each other using z-index?

Within a div element, I have an image: <div class="full-width"> <img src="images/products/product1.jpg" /> </div> I am looking to introduce another image called frame.png, but not as a background image! <img src="images/products ...

htmlcssz-index

How to incorporate a phone number input with country code using HTML

Can anyone help me create a phone number input field with a country code included? I've tried a few methods but haven't had much success. Here is the code I've been working with: <div class="form-group "> <input class= ...

javascripthtmlcssasp.net-core

Struggling to include additional spacers in my SCSS due to limitations with Bootstraps $spacer variable

I've encountered an issue where I am unable to add new spacers to Bootstrap (4.3) in my SCSS file. Interestingly, my custom style sheet is placed after bootstrap.css in the HTML. In my SCSS file, the sequence appears as follows: $spacer: 1rem !defaul ...

twitter-bootstrapsassbootstrap-4

Tips for including subjects in JSON data

I am trying to include the subject in JSON data so that I can fetch it using $.each(data.subject). Below is my API code where I am retrieving all the data encoded in JSON format. Any assistance would be greatly appreciated. [{"id":"79","FirstName":"Elon", ...

javascriptphphtmlmysqljson

Animating container heights in React allows for smooth transitions and dynamic

Check out my demo here This demo features a simple app with four buttons and a text area. Each button click loads different text, which varies in length and causes the grey container to adjust its height accordingly. I'm wondering if it's poss ...

cssreactjs

Ways to increase the font size of input text using bootstrap's css framework

I currently have a bootstrap textbox set up like this: <input type="text" class="span9" required name="input_text"/> My goal is to increase the height of my input box to 300px. The width, on the other hand, is being handled by span9. I utilized In ...

csstwitter-bootstraptextbox

Using jQuery to select the child element of the parent that came before

Recently, I've been experimenting with creating animations using CSS and jQuery. While it has been successful so far, I'm now looking to take it a step further. Specifically, I want information to appear on top of an image when the user clicks on ...

javascriptjqueryhtmlcss

Implementing a custom loader screen in jQuery Mobile instead of displaying an error page while loading

I am in the process of developing a hybrid mobile application using Intel XDK and jQuery Mobile for the user interface. One challenge I encountered is related to an ajax form submission, which involves two logins and the use of tabs (2). Initially, I focus ...

htmljquery-mobileloader

What is the best way to build a Div structure using a JavaScript Array?

I am currently attempting to create a simple div construct based on a JavaScript array. However, my current approach only displays the last group/element of the array. What adjustments need to be made in order to generate a repeating div construct for each ...

javascriptjqueryhtmlarrays

Pagination is not supported by HTML

I have been struggling to paginate the data on my pages. Despite trying various solutions, none seem to work for me. Presently, I am using code sourced from this link: https://datatables.net/examples/styling/bootstrap5.html. The expected outcome can be vie ...

htmlcsshtml-tablepaginationbootstrap-5

The font rendering in Safari appears to have distinct differences compared to other web browsers

My concern is related to the HTML tag below: <a href="/partner-team/team" class="button button__style--1">MEHR</a> This is how the CSS appears: a { text-decoration: none; } .button { padding: 0.2rem 4rem; curso ...

htmlcssbrowsercross-browser

Using CSS transform to enhance Flash content

I am currently working on a web application that is contained within an iframe. The iframe has been scaled using -webkit-transform:scale(0.8), which is functioning well. However, I am encountering an issue with the flash audio recorder within the iframe no ...

cssflashtransformscale

Is it acceptable to utilize a UUID as an HTML tag ID without encountering any problems?

I need to handle dynamic content accessible through an index on a side panel. When a user selects an element from the side panel, I use the ID to determine which data they're requesting so that I can generate the corresponding content for the main sec ...

jqueryhtmlperformancedomuuid

What causes the NavBar to show and hide within a specific range?

Recently, I encountered a perplexing issue with my navbar. It functions correctly except for one strange behavior that has left me baffled. Why does the menu appear when I adjust the width to 631px, but disappear at 600px? And vice versa – why does it wo ...

htmlcssangulartypescript

Encountering a surprise syntax error while trying to reference JavaScript from HTML?

After downloading this code from Github to make some modifications, I decided to run it locally. Link to the downloaded file The main index.html file references the JavaScript using: <script type="text/javascript" src="app.0ffbaba978f8a0c5e2d0.js">& ...

javascripthtmlthree.js

What is the method for displaying an asterisk in a select box option?

Is there a way to append an asterisk after the first option in a select element? Here is my html <select class="form-control textyformcontrol"> <option selected>Service area</option> <option>First Option</option> &l ...

htmlcss

How to create a unique splash screen for mobile devices when the site is opened

What is the typical method for implementing a splash screen that appears when accessing a website from a mobile device? This screen usually contains links to native apps and an option to proceed to the full site. I am considering utilizing to detect the ...

asp.netcssmobilesplash-screen

CSS formula for "height of browser screen minus the combined height of the header and footer"

Is it possible to set the minimum height of a <section> in an HTML page to be equal to the screen height minus the combined heights of the <header> and <footer>? section{ min-height: screen-height-(header + footer height) } ...

css