BootStrap | Text Utilities (Alignment, Wrapping, Weight etc.) - GeeksforGeeks

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:<!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>Output:
<!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>
Output:
text-center: It sets the text alignment to center for all screen sizes.Example:<!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>Output:
Example:
<!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>
Output:
text-left: It sets the text alignment to left for all screen sizes.Example:<!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>Output:
Example:
<!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>
Output:
text-right: It sets the text alignment to right for all screen sizes.Example:<!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>Output:
Example:
<!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>
Output:
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<!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>Output: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-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
<!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>
Output:
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.<!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>Output:
<!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>
Output:
text-nowrap: It removes text wrapping on the applied element.<!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>Output:
<!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>
Output:
text-truncate: It sets truncation on the applied element with ellipses.<!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>Output:
<!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>
Output:
Font Weight and Italics
font-weight-bold: It is used to set font text to bold face.<!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>Output:
<!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>
Output:
font-weight-bolder: It is used to set font weight bolder than its parent element.<!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>Output:
<!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>
Output:
font-weight-normal: It is used to set normal font weight.<!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>Output:
<!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>
Output:
font-weight-light: It is used to set light font weight to the text.<!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>Output:
<!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>
Output:
font-weight-lighter: It is used to set font weight lighter than its parent element.<!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>Output:
<!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>
Output:
font-italics: It is used to set the style of the font to italics.<!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>Output:
<!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>
Output:
Monospace:
text-monospace: It is used to change the text font to monospace.<!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>Output:
<!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>
Output:
Reset Color:
text-reset: It is used to remove the font color from the text to font color inherited from its parent element.<!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>Output:
<!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>
Output:
Remove Text Decorations:
text-decoration-none: It is used to remove all the text decoration from the text.<!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>Output:
<!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>
Output:
Picked
Technical Scripter 2018
Technical Scripter
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Roadmap to Become a Web Developer in 2022
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript
How to calculate the number of days between two dates in javascript?
How to create footer to stay at the bottom of a Web page?
Differences between Functional Components and Class Components in React