correa de arranque | Utilidades de texto (alineación, envoltura, peso, etc.)

Posted on by Rudeus Greyrat

Bootstrap es uno de los marcos front-end de código abierto más populares que nos ayuda a desarrollar sitios web y aplicaciones web con capacidad de respuesta y para dispositivos móviles. Como parte de su oferta, bootstrap nos brinda una colección de clases, llamadas clases de utilidades de texto , que controlan varias propiedades de texto, como alineación de texto, ajuste de texto, desbordamiento de texto, transformación de texto, peso de fuente, cursiva, monoespaciado, reinicio color del texto, eliminando las decoraciones de texto.

Puntos de interrupción de Bootstrap:

  • sm: ventana gráfica superior a 576 px.
  • md: ventana gráfica superior a 768 px.
  • lg: ventana gráfica superior a 992 px.
  • xl: ventana gráfica superior a 1200 px.

Veamos ahora las distintas clases:

Alineación del texto:

  • justificación de texto: como sugiere el nombre, esta clase se usa para establecer la alineación del texto en un estado justificado.
    Ejemplo:

    <!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>

    Producción:

    bootstrap-text-justify

  • text-center: Establece la alineación del texto al centro para todos los tamaños de pantalla.

    Ejemplo:

    <!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>

    Producción:

    bootstrap-text-center

  • text-left: Establece la alineación del texto a la izquierda para todos los tamaños de pantalla.

    Ejemplo:

    <!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>

    Producción:
    bootstrap-text-left

  • text-right: Establece la alineación del texto a la derecha para todos los tamaños de pantalla.

    Ejemplo:

    <!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>

    Producción:
    bootstrap-text-right

  • text-(viewport)-(align): Bootstrap nos ofrece una serie de clases que pueden cambiar la alineación del texto en función del tamaño de la ventana gráfica.
    • text-sm-left: establece la alineación del texto a la izquierda en la ventana gráfica de tamaño superior a 576px (sm).
    • text-md-left: establece la alineación del texto a la izquierda en la ventana gráfica de tamaño superior a 768px (md).
    • text-lg-left: establece la alineación del texto a la izquierda en la ventana gráfica de tamaño superior a 992px (lg).
    • text-xl-left: establece la alineación del texto a la izquierda en la ventana gráfica de tamaño superior a 1200px (xl).
    • text-sm-center: establece la alineación del texto para que se centre en la ventana gráfica de tamaño superior a 576 px (sm).
    • text-md-center: establece la alineación del texto para que se centre en la ventana gráfica de tamaño superior a 768 px (md).
    • text-lg-center: establece la alineación del texto para que se centre en la ventana gráfica de tamaño superior a 992px (lg).
    • text-xl-center: establece la alineación del texto para que se centre en la ventana gráfica de tamaño superior a 1200 px (xl).
    • text-sm-right: establece la alineación del texto a la derecha en la ventana gráfica de tamaño superior a 576px (sm).
    • text-md-right: establece la alineación del texto a la derecha en la ventana gráfica de tamaño superior a 768px (md).
    • text-lg-right: establece la alineación del texto a la derecha en la ventana gráfica de tamaño superior a 992px (lg).
    • text-xl-right: establece la alineación del texto a la derecha en la ventana gráfica de tamaño superior a 1200px (xl).

    Ejemplo: texto-sm-derecha

    <!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>

    Producción:
    bootstrap-text-sm-right

    Nota: Puede combinar texto-(alinear) y texto-(ventana)-(alinear) y también dos textos diferentes-(ventana)-(alinear), para obtener diferentes alineaciones según diferentes ventanas. Por ejemplo, puede usar text-center y text-md-right, para obtener la alineación correcta del texto cuando el tamaño de la ventana gráfica es mayor a 768px (md), en ventanas gráficas más pequeñas, el texto estará alineado al centro.

Ajuste de texto

  • text-wrap: establece el ajuste de texto en el elemento aplicado.

    <!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>

    Producción:
    bootstrap-text-wrap

  • text-nowrap: elimina el ajuste de texto en el elemento aplicado.

    <!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>

    Producción:
    bootstrap-text-nowrap

  • text-truncate: establece el truncamiento en el elemento aplicado con puntos suspensivos.

    <!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>

    Producción:
    bootstrap-text-truncate

Peso de fuente y cursiva

  • font-weight-bold: se utiliza para configurar el texto de la fuente en negrita.

    <!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>

    Producción:
    bootstrap-font-weight-bold

  • font-weight-bolder: se utiliza para establecer el peso de la fuente más negrita que su elemento principal.

    <!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>

    Producción:
    bootstrap-font-weight-bolder

  • font-weight-normal: Se utiliza para establecer el peso de fuente normal.

    <!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>

    Producción:
    bootstrap-font-weight-normal

  • font-weight-light: se utiliza para establecer un peso de fuente ligero en el texto.

    <!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>

    Producción:
    bootstrap-font-weight-light

  • font-weight-lighter: se utiliza para establecer un peso de fuente más ligero que su elemento principal.

    <!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>

    Producción:
    bootstrap-font-weight-lighter

  • font-italics: Se utiliza para establecer el estilo de la fuente en cursiva.

    <!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>

    Producción:
    bootstrap-font-weight-italic

Monoespaciado :

  • text-monospace: Se utiliza para cambiar la fuente del texto a 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>

    Producción:
    bootstrap-text-monospace

Restablecer color :

  • text-reset: se utiliza para eliminar el color de fuente del texto al color de fuente heredado de su elemento principal.

    <!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>

    Producción:
    bootstrap-text-reset

Eliminar decoraciones de texto :

  • text-decoration-none: Se utiliza para eliminar toda la decoración de texto del texto.

    <!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>

    Producción:
    text-decoration-none

Publicación traducida automáticamente

Artículo escrito por Husban y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *