Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 5 Text Classes</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="m-4"> <h2>Text alignment</h2> <p class="text-start">Left aligned text on all viewport sizes.</p> <p class="text-center">Center aligned text on all viewport sizes.</p> <p class="text-right">Right aligned text on all viewport sizes.</p> <hr> <h2>Responsive text alignment</h2> <p class="text-sm-start">Left aligned text on viewports sized SM (small) or wider.</p> <p class="text-md-start">Left aligned text on viewports sized MD (medium) or wider.</p> <p class="text-lg-start">Left aligned text on viewports sized LG (large) or wider.</p> <p class="text-xl-start">Left aligned text on viewports sized XL (extra-large) or wider.</p> <hr> <h2>Text transform</h2> <p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p> <hr> <h2>Font sizes</h2> <p class="fs-1">.fs-1 text</p> <p class="fs-2">.fs-2 text</p> <p class="fs-3">.fs-3 text</p> <p class="fs-4">.fs-4 text</p> <p class="fs-5">.fs-5 text</p> <p class="fs-6">.fs-6 text</p> <hr> <h2>Font weight and italics</h2> <p class="fw-bold">Bold text.</p> <p class="fw-bolder">Bolder weight text (relative to the parent element).</p> <p class="fw-normal">Normal weight text.</p> <p class="fw-light">Light weight text.</p> <p class="fw-lighter">Lighter weight text (relative to the parent element).</p> <p class="fst-italic">Italic text.</p> <p><em class="fst-normal">Text with normal font style</em></p> <hr> <h2>Monospace</h2> <p class="font-monospace">This is in monospace</p> <hr> <h2>Text wrapping and overflow</h2> <p class="badge bg-primary text-wrap" style="width: 6rem;">This text should wrap.</p> <p class="text-nowrap bg-warning" style="width: 10rem;">No wrap text. This text should overflow the parent.</p> <!-- Block level --> <div class="row"> <div class="col-2 text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> </div> <!-- Inline level --> <span class="d-inline-block text-truncate" style="max-width: 150px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> <hr> <h2>Word break</h2> <p class="text-break">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p> <hr> <h2>Reset color</h2> <p class="text-muted">Muted text with a <a href="#" class="text-reset">reset link</a>.</p> <hr> <h2>Text decoration</h2> <p><a href="#" class="text-decoration-none">This link has its text decoration removed.</a></p> <p class="text-decoration-underline">This text has a line underneath it.</p> <p class="text-decoration-line-through">This text has a line going through it.</p> </div> </body> </html>
