1. What are Breakpoints?

Breakpoints are screen-width thresholds where layout and styles change to adapt to different devices (mobile, tablet, desktop, etc.).

Bootstrap 5 breakpoints (default):

2. How Responsive Utilities Work

Bootstrap utilities (spacing, display, flex, text, etc.) can be applied per breakpoint using the format:

{property}{-breakpoint?}-{value}

• No breakpoint → applies to all screen sizes.

• With breakpoint → applies only from that size and up.

3. Examples of Responsive Utilities

a) Display utilities

<!-- Always hidden -->
<div class="d-none">Hidden</div>

<!-- Hidden on xs, visible on sm and above -->
<div class="d-none d-sm-block">Visible ≥576px</div>

<!-- Visible only on md and above -->
<div class="d-none d-md-block">Visible ≥768px</div>

b) Flex utilities

<!-- Column layout on mobile, row layout on desktop -->
<div class="d-flex flex-column flex-lg-row">
  <div class="p-2">Item 1</div>
  <div class="p-2">Item 2</div>
</div>

c) Spacing utilities

<!-- Margin bottom 3 on mobile, 5 on md and above -->
<div class="mb-3 mb-md-5">Box</div>

d) Text alignment

<p class="text-center text-md-start">
  Centered on small screens, left-aligned on medium+ screens
</p>

e) Grid column responsiveness

<div class="row">
  <div class="col-12 col-md-6">Left</div>
  <div class="col-12 col-md-6">Right</div>
</div>

• On mobile: stacked (12/12).

• On tablet/desktop: split (6/6).

4. Visibility Shortcuts

Instead of writing custom CSS media queries, you can use responsive classes:

• .d-none d-sm-block → hide on xs, show on sm+.

• .d-md-none → hide on md and larger.

• .d-lg-inline → inline display on large+.

5. Customizing Breakpoints

Bootstrap lets you change breakpoints via Sass variables if needed:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px,
  xl: 1280px
);

In short:

• Use -{breakpoint}- infix to control when styles kick in.

• Mobile-first: classes apply from that breakpoint upward.

• This avoids writing manual media queries in CSS.