Bootstrap 4 - Text

Bootstrap provides text utilities to control text alignment, transform, weight and more.
The text can justified by using the .text-justify class and for left, right, and center alignment of text, use the text-left, text-right and text-center classes respectively.
The following example demonstrates usage of text alignment utilities −
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <title>Bootstrap 4 Example</title>
      <style type = "text/css"></style>
   </head>
   
   <body>
      <div class = "container">
         <h2>Text alignment: Text Justify </h2>
         <p class = "text-success">
            The below text is justified by using the class "text-justify"
         </p>
         <p class = "text-justify">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 
            1500s, when an unknown printer took a galley of type and scrambled it to 
            make a type specimen book. It has survived not only five centuries, but 
            also the leap into electronic typesetting, remaining essentially unchanged. 
            It was popularised in the 1960s with the release of Letraset sheets 
            containing Lorem Ipsum passages, and more recently with desktop publishing 
            software like Aldus PageMaker including versions of Lorem Ipsum.
         </p>
         
         <h2>Text alignment: Left, Right, Center </h2>
         <p class = "text-left">Text is aligned on Left side by using class "text-left"</p>
         <p class = "text-center">Text is aligned at Center by using class "text-center"</p>
         <p class = "text-right">Text is aligned on Right side by using class "text-right"</p>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
         
   </body>
</html>
It will produce the following result −

            The below text is justified by using the class "text-justify"
         

            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 
            1500s, when an unknown printer took a galley of type and scrambled it to 
            make a type specimen book. It has survived not only five centuries, but 
            also the leap into electronic typesetting, remaining essentially unchanged. 
            It was popularised in the 1960s with the release of Letraset sheets 
            containing Lorem Ipsum passages, and more recently with desktop publishing 
            software like Aldus PageMaker including versions of Lorem Ipsum.
         
Text is aligned on Left side by using class "text-left"
Text is aligned at Center by using class "text-center"
Text is aligned on Right side by using class "text-right"
You can transform the text by using text capitalization classes as shown in the following example −
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <title>Bootstrap 4 Example</title>
      <style type = "text/css"></style>
   </head>
   
   <body>
      <div class = "container">
         <h2>Text Transform</h2>
         <p>Welcome to 
            <span class = "text-lowercase">tutorialspoint (text-lowercase)</span>. 
         </p>
         <p>Welcome to 
            <span class = "text-uppercase">tutorialspoint (text-uppercase)</span>
         </p>
         <p>Welcome to 
            <span class = "text-capitalize">tutorials-point (text-capitalize)</span>
         </p>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity =" sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −
Welcome to 
            tutorialspoint (text-lowercase). 
         
Welcome to 
            tutorialspoint (text-uppercase)

Welcome to 
            tutorials-point (text-capitalize)

You can change font weight of the text by using font-weight-* class and italicize the text by using font-italic class.  The monospace font creates fixed width text, which takes the same amount of horizontal space.
The following example demonstrates usage of above utilities −
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <title>Bootstrap 4 Example</title>
      <style type = "text/css"></style>
   </head>
   
   <body>
      <div class = "container">
         <h2>Font weight and italics</h2>
         <p>
            This text is <span class = "font-weight-bold">font-weight-bold </span>
         </p>
         <p>
            This text is <span class = "font-weight-normal">font-weight-normal</span>
         </p>
         <p>
            This text is <span class = "font-weight-light">font-weight-light</span>
         </p>
         <p>
            This text is <span class = "font-italic">font-italic</span>
         </p>
         
         <h2>Monospace</h2>
         <p class = "text-monospace">
            This text is written by using 'text-monospace' class
         </p>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −

            This text is font-weight-bold 


            This text is font-weight-normal


            This text is font-weight-light


            This text is font-italic


            This text is written by using 'text-monospace' class
         

    26 Lectures 
     2 hours 

 Anadi Sharma

    54 Lectures 
     4.5 hours 

 Frahaan Hussain

    161 Lectures 
     14.5 hours 

 Eduonix Learning Solutions

    20 Lectures 
     4 hours 

 Azaz Patel

    15 Lectures 
     1.5 hours 

 Muhammad Ismail

    62 Lectures 
     8 hours 

 Yossef Ayman Zedan
 Print
 Add Notes
 Bookmark this page