Skip to main content

Vertical Text Align in Bootstrap Template

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. }
  16. .background_Image {
  17. background:url(;
  18. width:600px;
  19. height:320px;
  20. }



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.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.


1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.