BS5 Breakpoints

What are breakpoints?

Breakpoints are screen width thresholds where responsive layouts change. Bootstrap uses breakpoint suffixes in class names to apply styles at specific widths and above.

Breakpoint names

• sm: small devices
• md: medium devices
• lg: large devices
• xl: extra large devices
• xxl: extra extra large devices

How responsive classes work

Most responsive utilities follow this pattern:

property-{breakpoint}-value

Example: responsive columns

<div class="row">
  <div class="col-12 col-md-6 col-lg-4">Card</div>
  <div class="col-12 col-md-6 col-lg-4">Card</div>
  <div class="col-12 col-md-6 col-lg-4">Card</div>
</div>

Example: responsive display

Show only on large screens:

<div class="d-none d-lg-block">Desktop only</div>

Example: responsive spacing

Increase padding on larger screens:

<div class="p-2 p-md-3 p-lg-5">Box</div>

Mobile-first rule

• Base classes apply to all sizes (mobile first)
• Breakpoint classes apply at that size and above
• Start with a simple mobile layout, then enhance for larger screens

Common mistakes

• Assuming md means only medium screens (it means md and up)
• Overcomplicating with too many breakpoint rules
• Forgetting the viewport meta tag

Recommended approach

• Design for mobile first
• Add md rules for tablet layout
• Add lg rules for desktop layout