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

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 SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

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

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