Bootstrap Breakpoints and Media Queries

Media queries and breakpoints help developers build responsive websites that adapt to different screen sizes and devices.

This article explains breakpoints and media queries in Bootstrap, their different types, and how to use them.

What are Breakpoints in Bootstrap?

Breakpoints in Bootstrap are predefined screen width thresholds where the layout changes to fit different device sizes. These breakpoints help control how content is displayed by adjusting the grid system to make your website responsive across various screen sizes.

For example, when the screen width reaches the md breakpoint (768px), the layout might switch from a single column to a multi-column design to accommodate tablets or small desktops.

Types of Breakpoints in Bootstrap

Bootstrap includes six default breakpoints. Each breakpoint corresponds to a minimum screen width where specific styles or layout adjustments apply.

These breakpoints include:

Below is a detailed explanation of these breakpoints in Bootstrap.

1. Extra Small (xs)

This breakpoint applies by default to screens smaller than 576px. No explicit media query is needed for xs in Bootstrap since the default layout is applied to small screens. However, if you want to create custom styles for screens below 576px, you can use this media query:

@media only screen and (max-width: 575px) {

  /* Custom styles for extra small devices (<576px) */

}

Here, the max-width: 575px ensures that the styles are applied to screens smaller than 576px.

2. Small (sm)

For screens 576px and up, this breakpoint is used. It is often used for devices like small tablets or large phones. To apply styles specifically for this breakpoint, use:

@media only screen and (min-width: 576px) {

  /* Custom styles for small devices (≥576px) */

}

The min-width: 576px ensures these styles are applied when the screen width is 576px or larger.

3. Medium (md)

For screens 768px and up, this breakpoint is typically used for tablets. If you want to adjust the layout or styles for medium-sized screens, use:

@media only screen and (min-width: 768px) {

  /* Custom styles for medium devices (≥768px) */

}

Here, the min-width: 768px ensures the styles are applied when the screen width reaches 768px or larger.

4. Large (lg)

For screens 992px and up, this breakpoint applies to larger tablets and desktops. You can use the following media query to customize your layout for large screens:

@media only screen and (min-width: 992px) {

  /* Custom styles for large devices (≥992px) */

}

The min-width: 992px ensures the styles are applied to screens with a width of 992px or more.

5. Extra Large (xl)

For screens 1200px and up, this breakpoint is commonly used for desktops. To target this screen size or larger, you can use:

@media only screen and (min-width: 1200px) {

  /* Custom styles for extra large devices (≥1200px) */

}

The min-width: 1200px applies styles to devices with a width of 1200px or more.

6. Extra Extra Large (xxl)

For screens 1400px and up, this breakpoint is used for huge desktops or high-resolution monitors. The media query for this size is:

@media only screen and (min-width: 1400px) {

  /* Custom styles for extra extra large devices (≥1400px) */

}

The min-width: 1400px ensures these styles apply to devices with a screen width of 1400px or more.

What are Media Queries in Bootstrap

Media queries in Bootstrap are CSS rules that apply styles based on the screen’s width. They help you define how elements should appear on different devices, such as mobiles, tablets, or desktops.

Bootstrap uses min-width media queries to control when layout changes should occur. These media queries work with the responsive grid system, visibility utilities, and custom CSS.

Here’s a basic media query example used in Bootstrap:

@media only screen and (min-width: 768px) {

  .custom-box {

    padding: 2rem;

  }

}

In this case, the .custom-box will get more padding only when the screen width is 768px or larger.

Min-Width vs Max-Width in Media Queries

Media queries are of two types:

• Min-width
• Max-width

Min-width in Bootstrap

min-width in media queries sets the lower limit for when styles should apply. It’s the most common approach in Bootstrap and aligns with its mobile-first design strategy.

@media (min-width: 768px) {

  .example {

    font-size: 18px;

  }

}

This style activates only when the screen width is 768px or more, leaving smaller screens with the default style.

Max-width in Bootstrap

max-width sets the upper limit, so styles apply only up to a specific screen size. This is less common in Bootstrap but useful when targeting smaller devices only.

@media (max-width: 767px) {

  .example {

    font-size: 14px;

  }

}

This style activates only when the screen width is 767px or less, ideal for customizing mobile or small screen layouts.

When to Use Media Queries or Breakpoints in Bootstrap?

Both media queries and breakpoints help make layouts responsive, but they serve slightly different purposes. Use breakpoints to control layouts using Bootstrap’s classes, and use media queries to apply custom styles where needed.

Use Breakpoints When:

• You structure layouts using grid classes like .col-sm-6, .col-md-4, or .col-lg-3
• You toggle element visibility with responsive utilities like .d-none, .d-md-block
• You align text or components using classes like .text-center, .text-lg-start

Use Media Queries When:

• You apply custom styles not handled by Bootstrap classes
• You tweak font sizes, spacing, or component behavior at specific widths
• You override Bootstrap’s default styles for more control

How to Create Bootstrap Breakpoints for a Responsive Website?

Follow these steps to create custom Bootstrap breakpoints for a responsive website.

1. First, you have to make a bootstrap responsive application/ web page. Here you need to set a ‘viewport’. The viewport is the visible area of a webpage. It varies with the different screen sizes of devices. You can control a viewport by using <meta> tag.

So, use the below syntax-

<meta name = "viewport" content = "width=device-width, initial-scale=1">

Here, initial-scale=1 set the initial zoom level of a page when it is loaded by the browser for the very first time.

2. Then add supportive bootstrap files to create responsive breakpoints.

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">

</script>

<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">

</script>

<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">

</script>

3. Next add the breakpoint syntax in the body section of the web page.

<div class = "row">
<div class = "col-sm-1" > small breakpoint </div>
<div class = "col-md-1" > medium breakpoint </div>
<div class = "col-lg-1" > large breakpoint </div>
<div class = "col-xl-1" > extra large breakpoint </div>
</div>

4. Finally, include the media queries in the style tag of the head section of the HTML page.

 <head>

<style>

@media only screen and (min-width: 600px) {.col-sm-2 {background: red ;}}

@media only screen and (min-width: 768px) {

.col-md-2 {background: aqua ;}

}

</style>

</head>

<body>

<div class = "container-fluid">

<div class = "row">

<div class = "col-sm-2" > small breakpoint </div>

<div class = "col-md-2" > medium breakpoint </div>

</div>

</div>

</body>

Creating Breakpoints Using Media Queries

You can define custom breakpoints in Bootstrap by writing your own media queries. These queries target specific screen widths and apply unique styles at each range. This gives you more control when the built-in classes aren’t enough or you want visual changes like background color or spacing based on screen size.

Below is an example that changes the background color of .col-2 elements at different breakpoints using min-width media queries:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap breakpoint Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
@media only screen and (min-width:600px) {.col-2 {background: red;}}
@media only screen and (min-width: 768px) {
.col-2 {background: aqua;}
}
@media only screen and (min-width: 992px) {
.col-2 {background: yellow;}
}
@media only screen and (min-width: 1200px) {
.col-2 {background:orange;}
}
.col-2{
border:1px solid black;
}
</style>
</head>
<body>
<div class="container-fluid">
<h1> Bootstrap breakpoint Example </h1>
<div class = "row">
<div class="col-2" > small breakpoint </div>
<div class="col-2" > medium breakpoint </div>
<div class="col-2" > large breakpoint </div>
<div class="col-2" > extra large breakpoint </div>
</div>
</div>
</body>
</html>

Testing Responsive Design through Breakpoints and Media Queries

To ensure your website is truly responsive, you must test it across various screen sizes, devices, and browsers. Both manual testing and automated testing are essential to catch layout issues and maintain a consistent user experience. Tools like BrowserStack Responsive Design Checker can help you validate your design on real devices.

1. Choose the Right Device and Browser Combinations

Review the most popular devices and browsers for your target audience. You might need to test on a combination of mobile devices (iOS, Android) and desktop browsers (Chrome, Firefox, Edge, Safari). Additionally, consider beta versions of browsers to catch issues before updates are rolled out.

2. Identify All Key DOM Elements

Identify and document all critical elements of your layout (headers, images, navigation, buttons, forms) that should adapt across different screen sizes. For example, navigation bars should collapse into a hamburger menu on mobile, and form fields should resize correctly on smaller screens.

3. Test Viewport and Orientation Changes

Switch between portrait and landscape modes on mobile devices and check how the layout behaves. Also, test the site’s viewport settings to ensure content fits within the screen dimensions.

For example, on an iPhone, rotate from portrait to landscape mode and ensure the layout doesn’t break (e.g., images resizing or text overlapping).

4. Validate Visual Checkpoints on All Breakpoints

Use these visual checks to confirm layout consistency:

• Ensure text, images, and menus are aligned correctly
• Font size, style, and color should remain consistent
• Content should not touch or overflow the screen edges
• Important text and images must be visible at all screen sizes
• Links, buttons, and navigation menus should remain functional and properly placed

5. Test Across Variable Conditions

Validate responsiveness under different network speeds, device states, and environmental factors. Include scenarios with background apps running, location changes, browser pop-ups, or ad interruptions to ensure consistent layout behavior across all breakpoints.

For instance, test the site on a 3G network speed and observe how it behaves. Additionally, check how your layout responds to changes like pop-ups or background processes like notifications.

Talk to an Expert

How to Test Media Queries?

You can test media queries by using Chrome Developer Tools. It enables the adjustment of layouts and elements on large ranges of mobile screen sizes. Also, you can fix an error quickly by using it. There are a few steps to do it-

1. Open the Chrome Dev Tools.
2. Set up the mobile view.
3. Then select ‘Responsive’ on the device list.
4. Finally, select ‘show media queries’.

After completing this process, you will be able to see four types of query bars with different colors. They are-

• Preset sizes – Gray
• Max width – Blue
• Max and min-width – Green
• Min width – Orange

Note: If you want to see a media query directly in your source code, just select it and right-click on it.

Testing Website Responsiveness on Real Devices With BrowserStack

Once you implement breakpoints and media queries, the next step is to validate how your website behaves across different devices and screen sizes. Testing on real devices ensures your responsive layout works as intended under real user conditions, not just in emulators or browser resize tools.

BrowserStack gives you instant access to 3,500+ real mobile and desktop device-browser combinations. You can interact with your site like a real user and validate responsiveness across screen sizes and platforms.

Key testing capabilities on BrowserStack:

• Real device features: Test geolocation, push notifications, and biometric authentication directly on real devices.
• Orientation and scaling: Switch between portrait and landscape to verify responsive layout behavior.
• Network simulation: Throttle bandwidth to simulate 3G, 4G, or offline conditions.
• Local testing support: Securely test staging or development environments without deploying them publicly.
• Cross-device consistency: Check layout, fonts, and visuals across various devices, including iPhones, Galaxy phones, Pixels, and more.

Conclusion

Media queries and breakpoints are essential for creating responsive designs that adapt to different screen sizes and devices. Validate these features to ensure your website provides a seamless experience across all platforms. Testing under various conditions, such as different network speeds and environments, also helps catch device-specific or browser-specific errors that emulators miss.

That’s where BrowserStack comes in. It gives instant access to 3,500+ real devices, browsers, and OS combinations to help you test under real user conditions. You can test using native device features like geolocation, push notifications, and biometric authentication across the latest and legacy devices. It also supports local testing, allowing you to securely test development and staging environments on real devices without extra setup.

Try BrowserStack for Free