Vertical Text Align in Bootstrap Template

Submitted by azalea zenith on Tuesday, October 4, 2016 - 14:15.
In this tutorial, we are going to create on how to display Vertical Text Align in Bootstrap Template. We are going to use the CSS for displaying text in the vertical alignment. We are going to add a simple background to see the text in the vertical arrange of the web page. We have to construct simple markup for the text to be aligned in the vertical alignment in the background that we have in the web page. The example text is "Text in Vertical Align". 
  1. <div class="background_Image">
  2.    <div class="vertical-align">Text in Vertical Align</div>
  3. </div>
And, this our CSS style to complete this simple tutorial. To align the text in vertical. We are going to rotate the text in 90 degrees. 
  1. <style type="text/css">
  2. .vertical-align {
  3. float:left;
  4. transform:rotate(90deg);
  5. transform-origin:left top 0;
  6. margin-left:100px;
  7. background-color:#FFF;
  8. opacity:0.9;
  9. font-size:1.8em;
  10. font-family:cursive;
  11. color:blue;
  12. text-transform:uppercase;
  13. padding:10px;
  14. }
  15.  
  16. .background_Image {
  17. background:url(http://wallpapercave.com/wp/NfGTsK4.jpg);
  18. width:600px;
  19. height:320px;
  20. }

Output

Result That's it, all you have to do is click the download button below to have a full source code of this simple tutorial. Thank you.

Tags

Add new comment

About text formats
  • 261 views