Articles → BOOTSTRAP → Text Alignment In Bootstrap

Text Alignment In Bootstrap






Purpose


  1. text-left - to make text left-aligned.
  2. text-right - to make text right-aligned.
  3. text-center - to make text center-aligned.
  4. text-justify - to make the text justified.
  5. text-nowrap - Text will not wrap if length of the text is greater than the width of the webpage.

Example


<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.css">
   </head>
   <body>
      <div class="container">
         <p class="text-left">Left-aligned text.</p>
         <p class="text-right">Right-aligned text.</p>
         <p class="text-center">Center-aligned text.</p>
         <p class="text-justify">Welcome to Gyan Sangrah: A one stop shop for people preparing for technical interviews. Gyansangrah is an online resource comprising all the possible questions you may face during your technical interview round. Gyansangrah also provides you with live examples to make concepts easier to understand.</p>
         <p class="text-nowrap">Welcome to Gyan Sangrah: A one stop shop for people preparing for technical interviews. Gyansangrah is an online resource comprising all the possible questions you may face during your technical interview round. Gyansangrah also provides you with live examples to make concepts easier to understand.</p>
      </div>
   </body>
</html>



Output


Picture showing the output of the Text alignment classes in bootstrap
Click to Enlarge


Posted By  -  Karan Gupta
 
Posted On  -  Tuesday, August 31, 2021

Query/Feedback


Your Email Id
 
Subject
 
Query/FeedbackCharacters remaining 250