Responsive Spacing in Bootstrap

Bootstrap spacing utilities support breakpoint-specific variants, letting you apply different spacing at different screen sizes. The pattern is .{property}{sides}-{breakpoint}-{size}.

Breakpoints

Available breakpoints: sm (≥576px), md (≥768px), lg (≥992px), xl (≥1200px), xxl (≥1400px). No breakpoint means the style applies to all sizes.

Spacing utility classes are mobile-first — they apply from the specified breakpoint and up.

Example

<div class="p-2 p-md-4 p-lg-5 bg-info text-white">
  Padding increases at each breakpoint
</div>

<div class="mt-3 mt-lg-0 mb-3 mb-lg-5">
  Different vertical margins on mobile vs desktop
</div>

<div class="d-flex flex-column flex-md-row gap-2 gap-md-4">
  <div class="p-3 bg-light">Item 1</div>
  <div class="p-3 bg-light">Item 2</div>
</div>

HTML

Full Editor

Pro Tip

Apply small spacing on mobile and larger spacing on desktop: .p-2 .p-md-4 .p-lg-5 — this makes touch targets comfortable on small screens.

Related Resources

Bootstrap Reference

Complete tag & property list

Bootstrap How-To Guides

Step-by-step practical guides

Bootstrap Exercises

Practice what you've learned