Saltar al contenido

Rotar texto en Bootstrap en diferentes tamaños de columna

Si encuentras alguna parte que no comprendes puedes dejarlo en los comentarios y trataremos de ayudarte lo mas rápido que podamos.

Su código es bastante funcional. Por supuesto, no ha incluido ningún HTML o Bootstrap, por lo que es un poco difícil descifrar exactamente dónde está teniendo problemas. Dicho esto, aquí tienes un pequeño CSS con un diseño similar al de tu imagen.

Básicamente, he agregado un relleno a la izquierda del texto y una altura mínima para que el texto de la izquierda no se superponga. Obviamente, ambos pueden tener que ser ajustados para satisfacer sus necesidades.

 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;
 

Aquí hay un violín con una demostración.

La forma más fácil de resolver con Bootstrap Extension.

Some text


muestra1

Más detalles: http://bootstrap-extension.com/#content-rotate

Calificaciones y reseñas

Si haces scroll puedes encontrar las críticas de otros administradores, tú asimismo puedes mostrar el tuyo si te apetece.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)


Tags :

Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *