Bootstrap 5 Utility Classes: Floating, Shadows, and Text Alignment Methods

Bootstrap 5 utility classes enable quick implementation of common styles without complex CSS. This article focuses on three core categories: floating, shadows, and text alignment. **Floating**: `float-start`/`float-end` achieve left/right element floating. `clearfix` clears parent container collapse (to avoid height loss when child elements float). Note parent container height issues and element overlap risks. **Shadows**: Classes like `shadow-sm` (subtle), `shadow` (default), `shadow-lg` (strong), and `no-shadow` (none) are ideal for elements needing "lift," e.g., buttons and cards. Pair with `rounded` for enhanced softness. **Text Alignment**: Horizontal alignment uses `text-start`/`center`/`end`, with responsive variants (e.g., `text-md-center`). Vertical alignment requires `d-flex` combined with `align-items-*` for multi-scenario typography. These utility classes are efficient and practical, allowing direct application in daily development to boost productivity.