Bootstrap 5 Text Styling: Alignment, Weight, and Line Height Settings
The text styles in Bootstrap 5 enable control over alignment, thickness, and line height through concise class names, enhancing readability and visual effects. For text alignment: The basic alignment classes are `.text-start` (left), `.text-center` (center), and `.text-end` (right). Responsive alignment supports breakpoint-based settings (sm, md, lg, xl) with the syntax `.text-<breakpoint>-<alignment>`, e.g., `.text-md-center` centers text on medium screens and above. For text weight: Use `.font-weight-*` classes, such as `.font-weight-bold` (bold), `.font-weight-normal` (normal), `.font-weight-light` (light), as well as `.font-weight-bolder`/`.font-weight-lighter` (relatively bolder/lighter than the parent element). For line height: Set via `.line-height-*` classes, including default (`.line-height-base`, 1.5), compact (`.line-height-sm`), and loose (`.line-height-lg`). A comprehensive example demonstrates the combined use of classes, such as centered bold headings and responsive subheadings. In summary, mastering these three types of styles (alignment, weight, line height) through their respective class names allows for quick
Read More