Bootstrap 5 Utility Classes Quick Reference: Margin, Padding, and Show/Hide Techniques

Bootstrap 5 utility classes enable quick style setting via class names without writing CSS, significantly improving development efficiency. This core introduction covers margin/padding utility classes and display/hide techniques. Margin/padding class names follow the format `[property]-[direction]-[size]`, where `m` (margin) or `p` (padding) is the property, directions are `t/b/l/r/x/y` (x/y are composite directions), and sizes range from 0-5 (corresponding to 0.25rem-3rem) and `auto` (only for margin). Common classes include `mt-3` (1rem top margin), `mx-3` (horizontal margins), `mx-auto` (centering block elements); padding classes like `pt-2` (0.5rem top padding) and `px-3` (horizontal padding). Display/hide techniques use `d-*` classes to control `display`: `d-none` hides elements (no space occupied), while `d-block`/`d-flex` set block/flex display. Responsiveness is achieved by combining with breakpoints (sm-xxl): `d-md-none` (hidden on medium and up), `d-none d-md-block` (hidden on mobile, visible on medium and up). The `invisible` class makes elements invisible while preserving space. Mastering these utility classes, combined with semantic HTML, enables efficient development.