Responsive Breakpoints

Responsive breakpoints in Bootstrap 4 allow you to create layouts that adjust and respond to different screen sizes and devices. Bootstrap uses a series of media queries to create responsive grid layouts that fit the devices on which they are viewed.

Bootstrap 4 Breakpoints

Bootstrap 4 defines five different screen sizes, each corresponding to a specific range of viewport widths:

Extra Small (xs): <576px
Small (sm): ≥576px
Medium (md): ≥768px
Large (lg): ≥992px
Extra Large (xl): ≥1200px

These breakpoints are used to apply different styles at various screen widths, ensuring that the layout adapts to the size of the screen.

Examples of Breakpoints in Action

Example 1: Grid Layout

You can create a responsive grid layout by using Bootstrap's grid system and specifying the number of columns for different breakpoints.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 4 Breakpoints Example</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-12 col-sm-6 col-md-4 col-lg-3">Column 1</div>
      <div class="col-12 col-sm-6 col-md-4 col-lg-3">Column 2</div>
      <div class="col-12 col-sm-6 col-md-4 col-lg-3">Column 3</div>
      <div class="col-12 col-sm-6 col-md-4 col-lg-3">Column 4</div>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

In this example:

On extra small screens (<576px), each column takes the full width (col-12).
On small screens (≥576px), two columns fit per row (col-sm-6).
On medium screens (≥768px), three columns fit per row (col-md-4).
On large screens (≥992px), four columns fit per row (col-lg-3).

Example 2: Visibility Classes

You can show or hide elements at different breakpoints using Bootstrap's visibility utility classes.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 4 Visibility Classes Example</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="d-block d-sm-none">Visible on extra small screens</div>
    <div class="d-none d-sm-block d-md-none">Visible on small screens</div>
    <div class="d-none d-md-block d-lg-none">Visible on medium screens</div>
    <div class="d-none d-lg-block d-xl-none">Visible on large screens</div>
    <div class="d-none d-xl-block">Visible on extra large screens</div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

In this example:

The first div is only visible on extra small screens.
The second div is only visible on small screens.
The third div is only visible on medium screens.
The fourth div is only visible on large screens.
The fifth div is only visible on extra large screens.

These examples show how you can use Bootstrap 4's responsive breakpoints to create flexible and adaptive layouts that look good on any device.

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Disclaimer About Us