Bootstrap 5 Typography Text utilities
Bootstrap 5 Typography supports both text utilities and color utilities. There are several text utilities like text alignment, text wrapping, overflow, word break, text-transform, etc. It also supports all the text color utilities. For text, the only color utility available is modifying the color of the text.
Bootstrap 5 Typography text utility classes: There are no specific classes for typography text, we can use text utilities and color utilities.
Syntax:
<p class="text-utility-class/color-utility-class"> ... </p>
Example 1: The code below demonstrates the usage of text utilities and color utilities.
HTML
<!doctype html> < html lang = "en" > < head > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body > < h1 class = "m-4 text-success" >w3wiki</ h1 > < h4 class = "ms-4" > Bootstrap 5 Typography Text utility </ h4 > < h3 class = "text-end m-3 text-primary" > This Heading is right aligned and has < strong >primary</ strong > color </ h3 > < div class = "container mt-4" > < div class = "container bg-light" style = "width:45%;" > < p >This text stays inside the container. < br > The background is colored light < br >This paragraph has highest Line height</ p > </ div > < p class = "text-capitalize text-secondary" > This classes are of bootstrap, learn about it bt class = "text-reset" > clicking here </ a > </ p > < p class = "font-monospace text-decoration-underline" > This text is in < strong >monospace</ strong > and has an Underline </ p > </ div > </ body > </ html > |
Output:
Example 2: The code below demonstrates multiple text utilities and shows how we can use text and color utilities together and also use the responsive text alignment classes:
HTML
<!doctype html> < html lang = "en" > < head > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body > < h1 class = "m-4 text-success" > w3wiki</ h1 > < h4 class = "ms-4" > Bootstrap 5 Typography Text utilities </ h4 > < h3 class = "text-lg-center mt-5 text-success" > This Heading gets center aligned when the screen size exceeds < strong >lg.</ strong > </ h3 > < div class = "container mt-4" > < div class="container bg-secondary text-light" style = "width:25%;" > < p >This text stays inside the container. < br >The text is colored light</ p > </ div > < p class = "text-uppercase bg-light" > This line is completely uppercased</ p > < p class = "fs-3 fw-bold fst-italic" > Font size - < strong >fs-3, </ strong >< br > Bold and italic Text </ p > </ div > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.0/content/typography/#text-utilities
Contact Us