MENU


Text

To horizontally align text, use:

.text[-sm | -md | -lg | -xl | -xxl ]

-{left | center | right}


RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
      <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
      <style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>

   <div class="container text-left">Where am I?</div>
   <div class="container text-center">Where am I?</div>
   <div class="container text-right">Where am I?</div>

</body><html>


To wrap long text to new lines or disable wrapping, use:

    .text-wrap

    .text-break (breaks word)

    .text-nowrap

For longer content, you can add a .text-truncate class to truncate the text with an ellipsis. (Requires display: inline-block or display: block.)


RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
      <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
      <style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>

    <div class="text-wrap" style="width:130px">
       WhereAmIWhereAmIWhereAmIWhereAmIWhereAmIWhereAmIWhereAmIWhereAmIWhereAmIWhereAmI
    </div>
    <div class="text-break" style="width:130px">
       WhereAmIWhereAmIWhereAmIWhereAmIWhereAmIWhereAmIWhereAmIWhereAmIWhereAmIWhereAmI
    </div>
    <div class="text-nowrap" style="width:130px">
       WhereAmIWhereAmIWhereAmIWhereAmIWhereAmIWhereAmIWhereAmIWhereAmIWhereAmIWhereAmI
    </div>
    <div class="text-nowrap text-truncate" style="width:130px">
       WhereAmIWhereAmIWhereAmIWhereAmIWhereAmIWhereAmIWhereAmIWhereAmIWhereAmIWhereAmI
    </div>

</body><html>

To transform text to different cases, use:

    .text-lowercase (an example here)

    .text-uppercase (AN EXAMPLE HERE)

    .text-capitalize (An Example Here)

To draw a line along text, use:

    .text-decoration-{underline | line-through | none}

To italicize text or make it normal, use:

    .font-italic

    .font-normal

To change the boldness of text, use:

    .font-weight-{bold | bolder | normal | light | lighter}


RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
      <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
      <style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>

   <p class="font-italic">How do I look?</p>
   <p class="font-weight-bolder">How do I look?</p>

</body><html>

To use a monospace font, use:

    .font-monospace

To change the line height, use:

    .lh-{1 | sm | base | lg}


RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
      <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
      <style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>

   <p class="lh-1 font-monospace">"Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma - which is living with the results of other people's thinking." -Steve Jobs</p>
   <p class="lh-lg">"If you look at what you have in life, you'll always have more. If you look at what you don't have in life, you'll never have enough." -Oprah Winfrey</p>

</body><html>