Struggling to align rotated text within the Bootstrap 4 Grid system

I have been working on a grid layout using Bootstrap 4's Grid system, and I am aiming for a design similar to the following:

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

While I have made significant progress and got almost 100% of it complete, I am facing an issue with the alignment of vertically rotated text overlapping the color grid. To rotate the text, I am utilizing Bootstrap Extensions' content rotate feature. However, I am struggling to align the labels properly.

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

If you'd like to take a look, here is a Codeply fiddle link:

htmlcssbootstrap-4

Answer №1

Instead of using the "rotate-sm-l-90" class, I decided to implement custom CSS for labels.

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

}

You can see the result here

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

CSS: Card elevates when keyboard is activated on a mobile device

[view image 1[view image 2] Image 1: Normal View, Image 2: When the keyboard is enabled, the card jumps up and when I close it's normal. Is this behavior normal? Or is there a fault in my CSS? I utilized styled-components for writing the CSS. CSS ...

cssreactjsflexboxstyled-components

Issue with Font Awesome 5 icons not displaying properly after integrating Bootstrap

Trying to spruce up my buttons by adding some fontawesome icons from bootstrap. The icons I'm using are: fas fa-user fas fa-users They display fine without any styling. However, when I apply the bootstrap button css, the "fa-users" icon appears as ...

htmlcsstwitter-bootstrapfont-awesomefont-awesome-5

How can I modify the value of a CSS animation rule in AngularJS?

I am looking to dynamically change the value assigned to stroke-dashoffset based on a custom input. @-webkit-keyframes donut-chart-1 { to { stroke-dashoffset: 100; } } @keyframes donut-chart-1 { to { stroke-d ...

javascriptangularjscsscss-animations

Tips for centering text with a Bootstrap switch

Currently, I am in the process of creating a form using Bootstrap, and I have been progressing well, except for one issue. I want to integrate a switch type checkbox into the form, with a label on top and text on either side of it. Despite several attempts ...

htmlcsscss-positionbootstrap-5

Disabling modal popup buttons in Bootstrap 4 using Javascript

JSFiddle DEMO: https://jsfiddle.net/2yx16k8L/ I'm encountering an issue with my JS code. I want a click on a div to open the entire content within it. However, this action is causing the modal button in the dropdown to stop working. How can I resolve ...

javascriptjquerybootstrap-4

How do I implement a dynamic input field in Angular 9 to retrieve data from a list or array?

I'm looking to extract all the strings from the Assignes array, which is a property of the Atm object, and populate dynamic input fields with each string. Users should be able to update or delete these strings individually. What approach can I take us ...

htmlangulartypescript

Irregular word spacing observed in HTML code

The alignment of text on my website is causing some spacing issues that I can't quite seem to resolve: It's an asp.net page, and I've attempted a couple of potential solutions: CSS .optionClosed { font-size: large; ...

htmlcss

CSS: adjusting styles for different screen sizes on both desktop computers and smartphones

While diving into Emacs, I am in the process of creating a website called Prince. The layout of columns is controlled by the directives below: body { font-family: var(--s-font-family); font-size: var(--normal-font-size); column-count: 3; c ...

htmlcssmedia-queries

Using a dashed border stroke creates a unique look when combined with border-radius properties

I have been experimenting with different methods to increase the distance between border strokes on my element. So far, I have tried various approaches without success. For example, I explored this resource Unfortunately, the issue arises when I incorpor ...

htmlcssborderborder-radius

Utilizing Angular 2+ with the [innerHTML] property to incorporate HTML with added style attributes

I am currently utilizing Angular 2+ [innerHTML] input for inserting HTML formatting that includes style tags. Within my template, the code looks like this: <span [innerHTML]="someVar"></span> In the component file, I have defined: someVar = ...

javascriptcssangular

Is it possible to employ the columns tag within an HTML email design?

I am attempting to design an HTML newsletter that features three columns. In my initial attempts, I utilized the columns tag: <span style="-webkit-column-count: 3; -moz-column-count:3; column-count:3; -webkit-column-width: 160px; -moz-column-width:160 ...

htmlcssgmailhtml-email

I'm wondering why myDivId.toggle() is functioning properly but myDivClass.toggle() is not working as expected

Using JQuery's toggle() function, I have been able to hide and show some DIVs successfully. Recently, I discovered relationships between certain DIVs that allowed me to group them into a class. I decided to try toggling the entire class rather than ...

javascriptjquerycsshtmltoggle

The registration page in PHP is malfunctioning, and the reason remains a mystery to me

Having trouble with my register page submit button. Any help is appreciated. Below is the structure of my SQL table: CREATE TABLE `USERS` ( `id` int(20) NOT NULL AUTO_INCREMENT PRIMARY KEY, `username` varchar(50) NOT NULL, `password` varchar(50) N ...

phphtmlmysql

The margin-right and margin-left properties function differently when it comes to dealing with overflow of floated divs

<body> <div class="content"> <div class="content-sidebar"> content-sidebar </div> <div class="content-main"> content-main </div> ...

csscss-floatoverflow

Remember to follow the camel case convention when utilizing element.tagName(String) with jSoup

Looking to change the name of an HTML tag using Jsoup in the following way - element.tagName("p:panelGroup"); But when I run this code, the output changes the case and I end up with p:panelgroup. Is there a method to preserve the camel case in the resul ...

htmljsoup

Utilize Vue.js to easily upload images alongside form input fields

I have recently started a small project with Vue Js. I am trying to incorporate an upload file option in my contact form. Due to the numerous input text fields, I am using serialize for the form. However, I am facing issues with the append function. How ca ...

javascriptjqueryhtmlvue.jsnuxt.js

Ways to even out the base of a tilted vessel?

My container is currently transformed with transform: skew(0deg, -3deg )translateY(-6vh), but since I am using it as a footer, I would like the bottom part to be completely flat. Is there a way to achieve this without placing another container on top wit ...

htmlcssbootstrap-4

Issue with offset calculation in bootstrap table occurs when the bootstrap-table is closed and the window is resized

In a recent project, I utilized the bootstrap table. However, upon closing the bootstrap table with the following script: $(document).ready(function () { $(".removetable").click(function (e) { $(".table-aria").remove(); ...

javascripthtmljquerybootstrap-5bootstrap-table

Is there a way to print an HTML page in Landscape mode within my Vue.js project?

I have been able to successfully print an HTML page in Landscape mode using the code below. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,maximum-scale=1.0"> ...

javascripthtmlvue.jsprintingvuejs2

Here is a guide on how to ensure that the div elements automatically fill the available space

Looking at this html page: Check out the jsFidlle Demo here I am aiming to have the boxes fill up the space effortlessly, each with equal width but varying heights. This is similar to the layout in Google Keep notes ...

jqueryhtmlcsstwitter-bootstrap