Breakpoints and media queries are essential elements of a responsive web design. Many use media query as the synonym for the breakpoint, as media queries create breakpoints. Mainly, media queries are written in CSS (Cascading Style System) language. Also, you can use HTML and JavaScript to write this.
Bootstrap is the most popular CSS framework for responsive web design. Apart from CSS, it also supports HTML and JS, and implements a Mobile-First approach for websites.
Also Read: CSS Grid vs Bootstrap
Types of Breakpoints in Bootstrap
There are four types of breakpoints in bootstrap. They are small (sm), medium (md), large (lg), and extra-large (xl). Also, there is a default size breakpoint for web pages. That is extra-small (xs).
1. Small (sm)
576px and greater screen sizes use small breakpoints. Ex- mobiles. The media query breakpoint syntax –
@media only screen and (min-width: 576px) {...}2. Medium (md)
768px and greater screen sizes use the medium breakpoints. Ex-tablets. Syntax below
@media only screen and (min-width: 768px) {...}3. Large (lg)
992px and greater screen sizes use the large breakpoints. Ex- laptops. Syntax –
@media only screen and (min-width: 992px) {...}4. Extra-large (xl)
1200px and greater screen sizes use the extra-large breakpoints. Ex: Desktops. Syntax –
@media only screen and (min-width: 1200px) {...}When to use Bootstrap?
Users don’t access a website through the same device and the same screen size again and again. Sometimes it’s a smartphone and then from a laptop or desktop. But you need to remember that your website should not be disrupted for its different visual appearances with various screen sizes. Thus you need a breakpoint.
A website responds at this point and adjusts itself for different screen sizes and becomes visible with a proper layout. The breakpoints are created by media queries. These media queries are written by @media rules and applies distinct styles for distinct devices.
How to create 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
<!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
Here are the right testing strategies for responsive web design that will maintain responsiveness. Both manual and automation testing become effective for this. See for yourself using BrowserStack Responsive Design Checker.
1. The most crucial thing is to select the right mobile devices and desktop browsers for responsive testing. You have to know about the current trending mobile and desktop browsers and OS versions. Sometimes, you have to test on a beta version of a web browser because frequent updates happen without alerting the users.
2. Identify all DOM (Document Object Model) elements of mobile and desktop websites.
3. Check your viewport and switch the orientation from landscape to portrait.
4. Also, you must validate the relevant UI checkpoints to compare the display of different screen sizes and orientations.
Consider these important visual checkpoints to test your site
Alignment of text, images, menus, and proper controls.
- Font size, style, and color should be similar for each type of text.
- Content should not run on the edges of the screen.
- Important content (text, paragraph, images) must be visible in all breakpoints.
- Proper display of links and other navigation menus, and buttons.
5. Testing your site under real user conditions is another necessary strategy. The responsiveness of a website can vary in several environments, locations, natural situations, etc. These can affect the user experience. So, always test the conditions like- network performance, locations, background activities, ads, pop-ups, etc.
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-
- Open the Chrome Dev Tools.
- Set up the mobile view.
- Then select ‘Responsive’ on the device list.
- 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.
Recommended Read: How To Test Website in Different Screen Sizes
Wrapping Up
So, we are reaching the end of this tutorial. Now you have got a clear idea about Bootstrap Breakpoints and Media Queries.. In this era of online services, a good quality website not only increases user experience but also levels up the conversions.
BrowserStack Live for Testing
- BrowserStack Live gives access to a real device cloud with the latest and legacy browsers for Android and iOS to conduct your responsive design testing.
- Test your website with different screen sizes, OS, and manufacturers in different conditions.
- You can find and fix bugs quickly with Live.
Featured Article
