Bootstrap - Breakpoints

What are Breakpoints?

Breakpoints in Bootstrap are specific screen widths (measured in pixels) where the layout of your webpage automatically changes to look good on different devices — like phones, tablets, laptops, and desktops.

In other words, breakpoints tell the browser:

“When the screen reaches this size, change how the content looks.”

This is what makes a website responsive — it adjusts to fit any screen size nicely.

Why Breakpoints are Important

Different devices have different screen sizes.

• A mobile phone screen is small.

• A tablet screen is medium-sized.

• A laptop or desktop screen is large.

If a webpage looks the same on all devices, it might be hard to read or navigate on smaller screens.
Breakpoints help fix that problem by changing the layout automatically.

For example:

• On a phone, you might want everything stacked vertically.

• On a laptop, you might want things side by side.

Bootstrap’s Default Breakpoints

Bootstrap has five main breakpoints (plus one extra for very large screens).

Note:
These breakpoints use the min-width rule — meaning they apply at that size and above.

How Breakpoints Work

Let’s take an example:

<div class="col-12 col-sm-6 col-lg-3">...</div>

Here’s what happens:

• On extra small screens (<576px) → col-12 makes it take up the whole width.

• On small screens (≥576px) → col-sm-6 makes it take half the width.

• On large screens (≥992px) → col-lg-3 makes it one-fourth the width.

So the same element changes its layout automatically depending on the screen size — thanks to breakpoints!

Mobile-First and Breakpoints

Bootstrap follows a mobile-first approach.
That means your styles are designed for mobile first (small screens), and then you use breakpoints to make them look better on larger devices.

So, if you write:

.col-12 {
  background: lightblue;
}
@media (min-width: 768px) {
  .col-12 {
    background: lightgreen;
  }
}

Then on:

• Phones → background is light blue

• Tablets and larger → background is light green

That’s how breakpoints let you gradually enhance your design as the screen gets bigger.

In Summary

• Breakpoints are specific screen widths that trigger layout changes.

• They make your site responsive, adapting it to different devices.

• Bootstrap has predefined breakpoints: sm, md, lg, xl, and xxl.

• They work with a mobile-first approach, meaning styles start for small screens and expand for larger ones.

• You use breakpoint classes like col-sm-6, d-md-block, text-lg-center, etc., to control behavior at different screen sizes.

Simple Way to Remember: