Related Articles

Related Articles

BootStrap | Text Utilities (Alignment, Wrapping, Weight etc.)
  • Last Updated : 15 Jan, 2019

Bootstrap is one of the most popular, open-source front-end frame work which helps us in developing responsive, mobile-first websites and web applications. As a part of its offering, bootstrap provides us a collection of classes, called the Text Utilities classes, which controls various text properties, such as, text alignment, text wrapping, text overflow, text transformation, font weight, italics, monospace, resetting color of text, removing text decorations.

Bootstrap breakpoints:

  • sm: Viewport greater than 576px.
  • md: Viewport greater than 768px.
  • lg: Viewport greater than 992px.
  • xl: Viewport greater than 1200px.

Let us now see the various classes:

Text Alignment:

  • text-justify: As the name suggest this class is used to set the text alignment to justified state.
    Example:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      <head>
        <!-- Custom CSS -->
        <style>
          p{
            border: 1px dashed black;
          }
          h1.text-center{
            color: green;
          }
      
        </style>
      
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
      
        <title>Bootstrap Text Utilities</title>
      </head>
      <body>
        <!-- Bootstrap class for making the enire div responsive -->
        <div class="container">
      
          <h1 class="text-center">GeeksForGeeks</h1>
      
          <h3>text-justify</h3>
      
          <!-- text-justify class -->
          <p class="text-justify">
            Prepare for the Recruitment drive of product
            based companies like Microsoft, Amazon, Adobe
            etc with a free online placement preparation
            course. The course focuses on various MCQ's
            & Coding question likely to be asked in the
            interviews & make your upcoming placement
            season efficient and successful.
          </p>
      
        </div>
      
        <!-- Link JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
      </body>
    </html>

    chevron_right

    

    

    
                        filter_none
    

    

    

    

    Output:
    

    bootstrap-text-justify
    

    • 

  • text-center: It sets the text alignment to center for all screen sizes.

    Example:
    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

      <head> 
    

        <!-- Custom CSS -->
    

        <style> 
    

          p{ 
    

            border: 1px dashed black; 
    

          } 
    

          h1.text-center{ 
    

            color: green; 
    

          } 
    

      
    

        </style> 
    

      
    

        <!-- Bootstrap CSS -->
    

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> 
    

      
    

        <title>Bootstrap Text Utilities</title> 
    

      </head> 
    

      <body> 
    

        <!-- Bootstrap class for making the enire div responsive -->
    

        <div class="container"> 
    

      
    

          <h1 class="text-center">GeeksForGeeks</h1> 
    

      
    

          <h3>text-center</h3> 
    

      
    

          <!-- text-center class -->
    

          <p class="text-center"> 
    

            Prepare for the Recruitment drive of product 
    

            based companies like Microsoft, Amazon, Adobe 
    

            etc with a free online placement preparation 
    

            course. The course focuses on various MCQ's 
    

            & Coding question likely to be asked in the 
    

            interviews & make your upcoming placement 
    

            season efficient and successful. 
    

          </p> 
    

      
    

        </div> 
    

      
    

        <!-- Link JavaScript -->
    

        <!-- jQuery, Popper.js, Bootstrap JS -->
    

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
    

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> 
    

        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> 
    

      </body> 
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    

    bootstrap-text-center
    

    • 

  • text-left: It sets the text alignment to left for all screen sizes.

    Example:
    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

      <head> 
    

        <!-- Custom CSS -->
    

        <style> 
    

          p{ 
    

            border: 1px dashed black; 
    

          } 
    

          h1.text-center{ 
    

            color: green; 
    

          } 
    

      
    

        </style> 
    

      
    

        <!-- Bootstrap CSS -->
    

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> 
    

      
    

        <title>Bootstrap Text Utilities</title> 
    

      </head> 
    

      <body> 
    

        <!-- Bootstrap class for making the enire div responsive -->
    

        <div class="container"> 
    

      
    

          <h1 class="text-center">GeeksForGeeks</h1> 
    

      
    

          <h3>text-left</h3> 
    

      
    

          <!-- text-left class -->
    

          <p class="text-left"> 
    

            Prepare for the Recruitment drive of product 
    

            based companies like Microsoft, Amazon, Adobe 
    

            etc with a free online placement preparation 
    

            course. The course focuses on various MCQ's 
    

            & Coding question likely to be asked in the 
    

            interviews & make your upcoming placement 
    

            season efficient and successful. 
    

          </p> 
    

      
    

        </div> 
    

      
    

        <!-- Link JavaScript -->
    

        <!-- jQuery, Popper.js, Bootstrap JS -->
    

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
    

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> 
    

        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> 
    

      </body> 
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    
bootstrap-text-left
    

    • 

  • text-right: It sets the text alignment to right for all screen sizes.

    Example:


    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

      <head> 
    

        <!-- Custom CSS -->
    

        <style> 
    

          p{ 
    

            border: 1px dashed black; 
    

          } 
    

          h1.text-center{ 
    

            color: green; 
    

          } 
    

      
    

        </style> 
    

      
    

        <!-- Bootstrap CSS -->
    

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> 
    

      
    

        <title>Bootstrap Text Utilities</title> 
    

      </head> 
    

      <body> 
    

        <!-- Bootstrap class for making the enire div responsive -->
    

        <div class="container"> 
    

      
    

          <h1 class="text-center">GeeksForGeeks</h1> 
    

      
    

          <h3>text-right</h3> 
    

      
    

          <!-- text-left right -->
    

          <p class="text-right"> 
    

            Prepare for the Recruitment drive of product 
    

            based companies like Microsoft, Amazon, Adobe 
    

            etc with a free online placement preparation 
    

            course. The course focuses on various MCQ's 
    

            & Coding question likely to be asked in the 
    

            interviews & make your upcoming placement 
    

            season efficient and successful. 
    

          </p> 
    

      
    

        </div> 
    

      
    

        <!-- Link JavaScript -->
    

        <!-- jQuery, Popper.js, Bootstrap JS -->
    

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
    

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> 
    

        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> 
    

      </body> 
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    
bootstrap-text-right

    • 

  • text-(viewport)-(align): Bootstrap offers us a series of classes which can change the text alignment based on the viewport size.

      

    • text-sm-left: It sets the text alignment to left on viewport of  size greater than 576px(sm).
      • 

    • text-md-left: It sets the text alignment to left on viewport of size greater than 768px(md).
      • 

    • text-lg-left: It sets the text alignment to left on viewport of size greater than 992px(lg).
      • 

    • text-xl-left: It sets the text alignment to left on viewport of size greater than 1200px(xl).
      • 

    • text-sm-center: It sets the text alignment to center on viewport of  size greater than 576px(sm).
      • 

    • text-md-center: It sets the text alignment to center on viewport of size greater than 768px(md).
      • 

    • text-lg-center: It sets the text alignment to center on viewport of size greater than 992px(lg).
      • 

    • text-xl-center: It sets the text alignment to center on viewport of size greater than 1200px(xl).
      • 

    • text-sm-right: It sets the text alignment to right on viewport of  size greater than 576px(sm).
      • 

    • text-md-right: It sets the text alignment to right on viewport of size greater than 768px(md).
      • 

    • text-lg-right: It sets the text alignment to right on viewport of size greater than 992px(lg).
      • 

    • text-xl-right: It sets the text alignment to right on viewport of size greater than 1200px(xl).
      • 

    

    Example: text-sm-right
    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

      <head> 
    

        <!-- Custom CSS -->
    

        <style> 
    

          p{ 
    

            border: 1px dashed black; 
    

          } 
    

          h1.text-center{ 
    

            color: green; 
    

          } 
    

      
    

        </style> 
    

      
    

        <!-- Bootstrap CSS -->
    

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> 
    

      
    

        <title>Bootstrap Text Utilities</title> 
    

      </head> 
    

      <body> 
    

        <!-- Bootstrap class for making the enire div responsive -->
    

        <div class="container"> 
    

      
    

          <h1 class="text-center">GeeksForGeeks</h1> 
    

      
    

          <h3>text-sm-right</h3> 
    

      
    

          <!-- text-sm-right -->
    

          <p class="text-sm-right"> 
    

            Prepare for the Recruitment drive of product 
    

            based companies like Microsoft, Amazon, Adobe 
    

            etc with a free online placement preparation 
    

            course. The course focuses on various MCQ's 
    

            & Coding question likely to be asked in the 
    

            interviews & make your upcoming placement 
    

            season efficient and successful. 
    

          </p> 
    

      
    

        </div> 
    

      
    

        <!-- Link JavaScript -->
    

        <!-- jQuery, Popper.js, Bootstrap JS -->
    

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
    

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> 
    

        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> 
    

      </body> 
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    
bootstrap-text-sm-right
    

    Note: You can combine text-(align) and text-(viewport)-(align) and also two different text-(viewport)-(align), to obtain different alignments according on different viewports. Like, you can use text-center and text-md-right, to get right text alignment when viewport on size is greater 768px(md), in smaller viewports the text will be center aligned.
    

    • 



Text Wrapping


    

  • text-wrap: It sets text wrapping on the applied element.

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

      <head> 
    

        <!-- Custom CSS -->
    

        <style> 
    

          p{ 
    

            border: 1px dashed black; 
    

          } 
    

          h1.text-center{ 
    

            color: green; 
    

          } 
    

      
    

        </style> 
    

      
    

        <!-- Bootstrap CSS -->
    

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> 
    

      
    

        <title>Bootstrap Text Utilities</title> 
    

      </head> 
    

      <body> 
    

        <!-- Bootstrap class for making the enire div responsive -->
    

        <div class="container"> 
    

      
    

          <h1 class="text-center">GeeksForGeeks</h1> 
    

      
    

          <h3>text-wrap</h3> 
    

      
    

          <!-- text-wrap -->
    

          <p class="text-wrap" style="width: 30rem;"> 
    

            Prepare for the Recruitment drive of product 
    

            based companies like Microsoft, Amazon, Adobe 
    

            etc with a free online placement preparation 
    

            course. The course focuses on various MCQ's 
    

            & Coding question likely to be asked in the 
    

            interviews & make your upcoming placement 
    

            season efficient and successful. 
    

          </p> 
    

      
    

        </div> 
    

      
    

        <!-- Link JavaScript -->
    

        <!-- jQuery, Popper.js, Bootstrap JS -->
    

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
    

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> 
    

        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> 
    

      </body> 
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    
bootstrap-text-wrap
    

    • 

  • text-nowrap: It removes text wrapping on the applied element.

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

      <head> 
    

        <!-- Custom CSS -->
    

        <style> 
    

          p{ 
    

            border: 1px dashed black; 
    

          } 
    

          h1.text-center{ 
    

            color: green; 
    

          } 
    

      
    

        </style> 
    

      
    

        <!-- Bootstrap CSS -->
    

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> 
    

      
    

        <title>Bootstrap Text Utilities</title> 
    

      </head> 
    

      <body> 
    

        <!-- Bootstrap class for making the enire div responsive -->
    

        <div class="container"> 
    

      
    

          <h1 class="text-center">GeeksForGeeks</h1> 
    

      
    

          <h3>text-nowrap</h3> 
    

      
    

          <!-- text-nowrap -->
    

          <p class="text-nowrap" style="width: 30rem;"> 
    

            Prepare for the Recruitment drive of product 
    

            based companies like Microsoft, Amazon, Adobe 
    

            etc with a free online placement preparation 
    

            course. The course focuses on various MCQ's 
    

            & Coding question likely to be asked in the 
    

            interviews & make your upcoming placement 
    

            season efficient and successful. 
    

          </p> 
    

      
    

        </div> 
    

      
    

        <!-- Link JavaScript -->
    

        <!-- jQuery, Popper.js, Bootstrap JS -->
    

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
    

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> 
    

        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> 
    

      </body> 
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    
bootstrap-text-nowrap
    

    • 

  • text-truncate: It sets truncation on the applied element with ellipses.

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

      <head> 
    

        <!-- Custom CSS -->
    

        <style> 
    

          p{ 
    

            border: 1px dashed black; 
    

          } 
    

      
    

          h1.text-center{ 
    

            color: green; 
    

          } 
    

        </style> 
    

      
    

        <!-- Bootstrap CSS -->
    

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> 
    

      
    

        <title>Bootstrap Text Utilities</title> 
    

      </head> 
    

      <body> 
    

        <!-- Bootstrap class for making the enire div responsive -->
    

        <div class="container"> 
    

      
    

          <h1 class="text-center">GeeksForGeeks</h1> 
    

      
    

          <h3>text-truncate</h3> 
    

      
    

          <!-- text-truncate -->
    

          <p class="text-truncate" style="width: 30rem;"> 
    

            Prepare for the Recruitment drive of product 
    

            based companies like Microsoft, Amazon, Adobe 
    

            etc with a free online placement preparation 
    

            course. The course focuses on various MCQ's 
    

            & Coding question likely to be asked in the 
    

            interviews & make your upcoming placement 
    

            season efficient and successful. 
    

          </p> 
    

      
    

        </div> 
    

      
    

        <!-- Link JavaScript -->
    

        <!-- jQuery, Popper.js, Bootstrap JS -->
    

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
    

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> 
    

        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> 
    

      </body> 
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    
bootstrap-text-truncate

    • 



Font Weight and Italics


    

  • font-weight-bold: It is used to set font text to bold face.

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

      <head> 
    

        <!-- Custom CSS -->
    

        <style> 
    

          p{ 
    

            border: 1px dashed black; 
    

          } 
    

      
    

          h1.text-center{ 
    

            color: green; 
    

          } 
    

        </style> 
    

      
    

        <!-- Bootstrap CSS -->
    

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> 
    

      
    

        <title>Bootstrap Text Utilities</title> 
    

      </head> 
    

      <body> 
    

        <!-- Bootstrap class for making the enire div responsive -->
    

        <div class="container"> 
    

      
    

          <h1 class="text-center">GeeksForGeeks</h1> 
    

      
    

          <h3>font-weight-bold</h3> 
    

      
    

          <!-- font-weight-bold -->
    

          <p class="font-weight-bold"> 
    

            Prepare for the Recruitment drive of product 
    

            based companies like Microsoft, Amazon, Adobe 
    

            etc with a free online placement preparation 
    

            course. The course focuses on various MCQ's 
    

            & Coding question likely to be asked in the 
    

            interviews & make your upcoming placement 
    

            season efficient and successful. 
    

          </p> 
    

      
    

        </div> 
    

      
    

        <!-- Link JavaScript -->
    

        <!-- jQuery, Popper.js, Bootstrap JS -->
    

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
    

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> 
    

        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> 
    

      </body> 
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    
bootstrap-font-weight-bold

    • 

  • font-weight-bolder: It is used to set font weight bolder than its parent element.

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

      <head> 
    

        <!-- Custom CSS -->
    

        <style> 
    

          p{ 
    

            border: 1px dashed black; 
    

          } 
    

      
    

          h1.text-center{ 
    

            color: green; 
    

          } 
    

        </style> 
    

      
    

        <!-- Bootstrap CSS -->
    

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> 
    

      
    

        <title>Bootstrap Text Utilities</title> 
    

      </head> 
    

      <body> 
    

        <!-- Bootstrap class for making the enire div responsive -->
    

        <div class="container"> 
    

      
    

          <h1 class="text-center">GeeksForGeeks</h1> 
    

      
    

          <h3>font-weight-bolder</h3> 
    

      
    

          <!-- font-weight-bolder -->
    

          <p class="font-weight-bolder"> 
    

            Prepare for the Recruitment drive of product 
    

            based companies like Microsoft, Amazon, Adobe 
    

            etc with a free online placement preparation 
    

            course. The course focuses on various MCQ's 
    

            & Coding question likely to be asked in the 
    

            interviews & make your upcoming placement 
    

            season efficient and successful. 
    

          </p> 
    

      
    

        </div> 
    

      
    

        <!-- Link JavaScript -->
    

        <!-- jQuery, Popper.js, Bootstrap JS -->
    

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
    

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> 
    

        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> 
    

      </body> 
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    
bootstrap-font-weight-bolder
    

    • 

  • font-weight-normal: It is used to set normal font weight.

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

      <head> 
    

        <!-- Custom CSS -->
    

        <style> 
    

          p{ 
    

            border: 1px dashed black; 
    

          } 
    

      
    

          h1.text-center{ 
    

            color: green; 
    

          } 
    

        </style> 
    

      
    

        <!-- Bootstrap CSS -->
    

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> 
    

      
    

        <title>Bootstrap Text Utilities</title> 
    

      </head> 
    

      <body> 
    

        <!-- Bootstrap class for making the enire div responsive -->
    

        <div class="container"> 
    

      
    

          <h1 class="text-center">GeeksForGeeks</h1> 
    

      
    

          <h3>font-weight-normal</h3> 
    

      
    

          <!-- font-weight-normal -->
    

          <p class="font-weight-normal"> 
    

            Prepare for the Recruitment drive of product 
    

            based companies like Microsoft, Amazon, Adobe 
    

            etc with a free online placement preparation 
    

            course. The course focuses on various MCQ's 
    

            & Coding question likely to be asked in the 
    

            interviews & make your upcoming placement 
    

            season efficient and successful. 
    

          </p> 
    

      
    

        </div> 
    

      
    

        <!-- Link JavaScript -->
    

        <!-- jQuery, Popper.js, Bootstrap JS -->
    

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
    

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> 
    

        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> 
    

      </body> 
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    
bootstrap-font-weight-normal

    • 

  • font-weight-light: It is used to set light font weight to the text.

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

      <head> 
    

        <!-- Custom CSS -->
    

        <style> 
    

          p{ 
    

            border: 1px dashed black; 
    

          } 
    

      
    

          h1.text-center{ 
    

            color: green; 
    

          } 
    

        </style> 
    

      
    

        <!-- Bootstrap CSS -->
    

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> 
    

      
    

        <title>Bootstrap Text Utilities</title> 
    

      </head> 
    

      <body> 
    

        <!-- Bootstrap class for making the enire div responsive -->
    

        <div class="container"> 
    

      
    

          <h1 class="text-center">GeeksForGeeks</h1> 
    

      
    

          <h3>font-weight-light</h3> 
    

      
    

          <!-- font-weight-light -->
    

          <p class="font-weight-light"> 
    

            Prepare for the Recruitment drive of product 
    

            based companies like Microsoft, Amazon, Adobe 
    

            etc with a free online placement preparation 
    

            course. The course focuses on various MCQ's 
    

            & Coding question likely to be asked in the 
    

            interviews & make your upcoming placement 
    

            season efficient and successful. 
    

          </p> 
    

      
    

        </div> 
    

      
    

        <!-- Link JavaScript -->
    

        <!-- jQuery, Popper.js, Bootstrap JS -->
    

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
    

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> 
    

        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> 
    

      </body> 
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    
bootstrap-font-weight-light

    • 

  • font-weight-lighter: It is used to set font weight lighter than its parent element.

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

      <head> 
    

        <!-- Custom CSS -->
    

        <style> 
    

          p{ 
    

            border: 1px dashed black; 
    

          } 
    

          h1.text-center{ 
    

            color: green; 
    

          } 
    

      
    

        </style> 
    

      
    

        <!-- Bootstrap CSS -->
    

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> 
    

      
    

        <title>Bootstrap Text Utilities</title> 
    

      </head> 
    

      <body> 
    

        <!-- Bootstrap class for making the enire div responsive -->
    

        <div class="container"> 
    

      
    

          <h1 class="text-center">GeeksForGeeks</h1> 
    

      
    

          <h3>font-weight-lighter</h3> 
    

      
    

          <!-- font-weight-lighter -->
    

          <p class="font-weight-lighter"> 
    

            Prepare for the Recruitment drive of product 
    

            based companies like Microsoft, Amazon, Adobe 
    

            etc with a free online placement preparation 
    

            course. The course focuses on various MCQ's 
    

            & Coding question likely to be asked in the 
    

            interviews & make your upcoming placement 
    

            season efficient and successful. 
    

          </p> 
    

      
    

        </div> 
    

      
    

        <!-- Link JavaScript -->
    

        <!-- jQuery, Popper.js, Bootstrap JS -->
    

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
    

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> 
    

        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> 
    

      </body> 
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    
bootstrap-font-weight-lighter

    • 

  • font-italics: It is used to set the style of the font to italics.

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

      <head> 
    

        <!-- Custom CSS -->
    

        <style> 
    

          p{ 
    

            border: 1px dashed black; 
    

          } 
    

          h1.text-center{ 
    

            color: green; 
    

          } 
    

      
    

        </style> 
    

      
    

        <!-- Bootstrap CSS -->
    

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> 
    

      
    

        <title>Bootstrap Text Utilities</title> 
    

      </head> 
    

      <body> 
    

        <!-- Bootstrap class for making the enire div responsive -->
    

        <div class="container"> 
    

      
    

          <h1 class="text-center">GeeksForGeeks</h1> 
    

      
    

          <h3>font-italic</h3> 
    

      
    

          <!-- font-italic -->
    

          <p class="font-italic"> 
    

            Prepare for the Recruitment drive of product 
    

            based companies like Microsoft, Amazon, Adobe 
    

            etc with a free online placement preparation 
    

            course. The course focuses on various MCQ's 
    

            & Coding question likely to be asked in the 
    

            interviews & make your upcoming placement 
    

            season efficient and successful. 
    

          </p> 
    

      
    

        </div> 
    

      
    

        <!-- Link JavaScript -->
    

        <!-- jQuery, Popper.js, Bootstrap JS -->
    

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
    

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> 
    

        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> 
    

      </body> 
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    
bootstrap-font-weight-italic

    • 



Monospace:


    

  • text-monospace:  It is used to change the text font to monospace.

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

      <head> 
    

        <!-- Custom CSS -->
    

        <style> 
    

          p{ 
    

            border: 1px dashed black; 
    

          } 
    

      
    

          h1.text-center{ 
    

            color: green; 
    

          } 
    

      
    

        </style> 
    

      
    

        <!-- Bootstrap CSS -->
    

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> 
    

      
    

        <title>Bootstrap Text Utilities</title> 
    

      </head> 
    

      <body> 
    

        <!-- Bootstrap class for making the enire div responsive -->
    

        <div class="container"> 
    

      
    

          <h1 class="text-center">GeeksForGeeks</h1> 
    

      
    

          <h3>text-monospace</h3> 
    

      
    

          <!-- text-monospace -->
    

          <p class="text-monospace"> 
    

            Prepare for the Recruitment drive of product 
    

            based companies like Microsoft, Amazon, Adobe 
    

            etc with a free online placement preparation 
    

            course. The course focuses on various MCQ's 
    

            & Coding question likely to be asked in the 
    

            interviews & make your upcoming placement 
    

            season efficient and successful. 
    

          </p> 
    

      
    

        </div> 
    

      
    

        <!-- Link JavaScript -->
    

        <!-- jQuery, Popper.js, Bootstrap JS -->
    

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
    

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> 
    

        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> 
    

      </body> 
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    
bootstrap-text-monospace

    • 



Reset Color:


    

  • text-reset: It is used to remove the font color from the text to font color inherited from its parent element.

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

      <head> 
    

        <!-- Custom CSS -->
    

        <style> 
    

          p{ 
    

            border: 1px dashed black; 
    

            color: blue; 
    

          } 
    

          h1.text-center{ 
    

            color: green; 
    

          } 
    

      
    

        </style> 
    

      
    

        <!-- Bootstrap CSS -->
    

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> 
    

      
    

        <title>Bootstrap Text Utilities</title> 
    

      </head> 
    

      <body> 
    

        <!-- Bootstrap class for making the enire div responsive -->
    

        <div class="container"> 
    

      
    

          <h1 class="text-center">GeeksForGeeks</h1> 
    

      
    

          <h3>text-reset</h3> 
    

      
    

          <!-- text-reset -->
    

          <p class="text-reset"> 
    

            Prepare for the Recruitment drive of product 
    

            based companies like Microsoft, Amazon, Adobe 
    

            etc with a free online placement preparation 
    

            course. The course focuses on various MCQ's 
    

            & Coding question likely to be asked in the 
    

            interviews & make your upcoming placement 
    

            season efficient and successful. 
    

          </p> 
    

      
    

        </div> 
    

      
    

        <!-- Link JavaScript -->
    

        <!-- jQuery, Popper.js, Bootstrap JS -->
    

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
    

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> 
    

        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> 
    

      </body> 
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    
bootstrap-text-reset

    • 



Remove Text Decorations:


    

  • text-decoration-none: It is used to remove all the text decoration from the text.

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

      <head> 
    

        <!-- Custom CSS -->
    

        <style> 
    

          p{ 
    

            border: 1px dashed black; 
    

            text-decoration: line-through; 
    

          } 
    

          h1.text-center{ 
    

            color: green; 
    

          } 
    

        </style> 
    

      
    

        <!-- Bootstrap CSS -->
    

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> 
    

      
    

        <title>Bootstrap Text Utilities</title> 
    

      </head> 
    

      <body> 
    

        <!-- Bootstrap class for making the enire div responsive -->
    

        <div class="container"> 
    

      
    

          <h1 class="text-center">GeeksForGeeks</h1> 
    

      
    

          <h3>text-decoration-none</h3> 
    

      
    

          <!-- text-decoration-none -->
    

          <p class="text-decoration-none"> 
    

            Prepare for the Recruitment drive of product 
    

            based companies like Microsoft, Amazon, Adobe 
    

            etc with a free online placement preparation 
    

            course. The course focuses on various MCQ's 
    

            & Coding question likely to be asked in the 
    

            interviews & make your upcoming placement 
    

            season efficient and successful. 
    

          </p> 
    

      
    

        </div> 
    

      
    

        <!-- Link JavaScript -->
    

        <!-- jQuery, Popper.js, Bootstrap JS -->
    

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
    

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> 
    

        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> 
    

      </body> 
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    
text-decoration-none
    

    • 




    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


                        

                      

                      
                                                    

                                

                                    

                                        

                                            
Recommended Articles

                                        

                                        

                                            
Page : 

                                            

                                        

                                    

                                    

                                        

                                            

                

                    

            

            
                
Bootstrap | Float utilities with Examples

                
15, Jan 19

            
        

            

            
                
Screen Reader utilities in bootstrap with Examples

                
23, Jan 19

            
        

            

            
                
Flexbox utilities in bootstrap with examples

                
31, Jan 19

            
        

            

            
                
Bootstrap 4 | Utilities

                
02, Jul 19

            
        

                

            

                

                    

            

            
                
How to prevent text in a table cell from wrapping using CSS?

                
26, Feb 19

            
        

            

            
                
Vertical alignment in Bootstrap with Examples

                
10, Jan 19

            
        

            

            
                
How to set the button alignment in Bootstrap ?

                
19, Jun 19

            
        

            

            
                
How to prevent inline-block divs from wrapping ?

                
08, Jun 20

            
        

                

            

                

                    

            

            
                
How to change font-weight of a canvas-type text using Fabric.js ?

                
26, Apr 20

            
        

            

            
                
How to change font-weight of a text using JavaScript ?

                
25, Dec 20

            
        

            

            
                
Include Bootstrap in AngularJS using ng-bootstrap

                
18, Jun 19

            
        

            

            
                
Difference between bootstrap.css and bootstrap-theme.css

                
13, Mar 20

            
        

                

            

                

                    

            

            
                
Difference Between Bootstrap 3 and Bootstrap 4

                
02, Jun 20

            
        

            

            
                
Difference between Bootstrap 4 and Bootstrap 5

                
09, Jul 20

            
        

            

            
                
Biopython - Pairwise Alignment

                
15, Oct 20

            
        

            

            
                
Title alignment in Plotly

                
03, Jan 21

            
        

                

            

                

                    

            

            
                
Image Replacement in Bootstrap using text-hide Class

                
12, Feb 19

            
        

            

            
                
How to align button to right side of text box in Bootstrap?

                
30, Aug 19

            
        

            

            
                
How to hide text-overflown as ellipsis using dynamic bootstrap cols ?

                
30, Jan 20

            
        

            

            
                
How to wrap text around circular carousel in Bootstrap 4 ?

                
30, Jan 20

            
        

                

            

                

                    

            

            
                
How to place table text into center using Bootstrap?

                
05, Aug 20

            
        

            

            
                
How to align an image and text vertically on the same line in React Bootstrap?

                
13, Jan 21

            
        

            

            
                
Transforming a Plain Text message to Cipher Text

                
24, Oct 18

            
        

            

            
                
How to select all text in HTML text input when clicked using JavaScript?

                
28, Apr 19

            
        

                

            
                                        

                                    

                                    

                                        

                                    

                                

                            

                        
                      

                          

                              
                          

                          

                                                                

                                      
                                          first_page
                                          Previous
                                      
                                      
                                      

                                          BootStrap | Positioning an element with Examples
                                      

                                  

                                                                

                                      
                                          Next
                                          last_page
                                      
                                      
                                      

                                          Basic Shell Commands in Linux
                                      

                                  

                                                        

                      

                    

                          
                        

                            

                                
Article Contributed By :

                                

                                    

                                        

        https://media.geeksforgeeks.org/auth/avatar.png
    

    

        

            Husban
        

        

            @Husban
        

    
                                    

                                

                            

                            

                                
Vote for difficulty

                                                                        

                                        

                                            
                                            
                                            
                                            
                                            
                                        

                                        

                                    

                                

                            

                            

                                                                                                

                                    
Article Tags : 

                                    
                                

                                                                                            

                            

                                

                                    

                                    Report Issue
                                

                                
                            

                          
                        


                    

                

            

        

        

            
			
		
	        

    

    

        

            

                

                    
                    

                    

                        
                    

                    

                

            

        

    



  
	



  
  
  






    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
    
    







   Lightbox