Spacing Utilities
Bootstrap spacing classes encode margin and padding using a compact naming system instead of requiring custom CSS for common gaps.
Core concept
Explain m and p prefixes, t/b/s/e/x/y directions, numeric scale values, and auto margins. Cover responsive spacing such as p-md-4 and explain why logical start/end directions are useful for RTL support.
Using it in a real interface
Use spacing to separate sections, card content, buttons, form fields, and navigation groups. Show how gap can sometimes be cleaner than child margins for flex or grid collections.
Implementation notes
Avoid using many different spacing values randomly. Establish a small visual rhythm and reserve custom CSS for spacing requirements that the utility scale cannot express.
ADVERTISEMENT