Bootstrap - Breakpoint

This chapter will discuss about Bootstrap breakpoints. Bootstrap breakpoints help us determine how a responsive layout is viewed on various devices and viewport sizes.

Basic concepts

  • Breakpoints in Bootstrap are used to create responsive designs. You may adjust them at a particular viewport or device size.

  • CSS media queries allow us to customize styling based on browsers and operating sytem parameters. Media queries in Boostrap mostly use min-width to control the breakpoints.

  • Bootstrap's goal is mobile-first, responsive designs. Bootstrap creates mobile-friendly layouts with minimal styles, adding layers for larger devices. It improves rendering time and gives users a better viewing experience.

Types of breakpoints

Bootstrap provides six default breakpoints referred to as grid tiers. These can be customized if we use Boostrap's source Sass files.

Breakpoint Class Infix Dimensions
Extra small

None <576px
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extra large xl ≥1200px
Extra extra large xxl ≥1400px

These breakpoints cover common device sizes and viewport dimensions. These bootstrap breakpoints can be changed using Sass, as shown below:

  $grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1400px
  );

Media queries

Bootstrap is developed to be mobile first, hence media queries are used to create wise breakpoints for its layouts and interfaces. Minimum viewport widths are used to control breakpoints which scale up elements as viewport changes.

Min-width

min-width media feature state specifies the minimum screen width of a specific device. Setting min-width in the breakpoints means CSS is only applied to devices whose width is greater than min-width of the device. 

  @include media-breakpoint-up(sm) { ... }

The above syntax means that CSS would be applied for devices larger than the min-width i.e Small devices (landscape phones, 576px and up).

Let us see usage of min-width media feature with an example. Here you will see that we apply hide a div on devices width less than 768px.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Breakpoint</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
  <style>
  .custom-class {
    display: none;
  }
  @media (min-width: 768px) {
    .custom-class {
      display: block;
    }
  @media (min-width: 768px) {
    .custom-class {
      display: block;
    }
  }
  </style>
  </head>
  <body>
    <h5>This block is visible on all devices</h5>
    <div class="container-fluid mt-2 ">
      <div class="row">
        <div class="col-md-6 bg-warning p-3">
          md-6 warning
        </div>
      </div>
    </div><br>
    <h5>This block is not visible for sm breakpoint but visible for other breakpoints</h5>
    <div class="container-fluid mt-2 custom-class">
      <div class="row">
        <div class="col-md-6 bg-warning p-3">
          md-6 warning
        </div>
      </div>
    </div>
  </body>
  </html>

Max-width Breakpoint

max-width media feature states the maximum screen width of a specific device. Setting max-width in the breakpoints means CSS is only applied to devices whose width is smaller than mentioned in the media query.

  @include media-breakpoint-down(xl) { ... }

The above syntax means that CSS would be applied to large devices (desktops, less than 1200px).

Let us see usage of max-width media feature with an example:

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Breakpoint</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
<style>
.custom-class {
  display: none;
}
@media (max-width: 767.98px) {
  .custom-class {
    display: block;
  }
}
</style>
</head>
<body>

  <h5>This block visible on all devices</h5>
  <div class="container-fluid mt-2">
    <div class="row">
      <div class="col-xxl-3 bg-primary text-black p-3">
        xxl-3 primary
      </div>
    </div>
  </div>
  <h5>This block not visible all devices larger than sm</h5>
  <div class="container-fluid mt-2 custom-class">
    <div class="row">
      <div class="col-lg-6  bg-warning text-black p-3">
        lg-6 warning
      </div>
    </div>
  </div>
</body>
</html>

Single Breakpoint

Single breakpoint means targeting a specific screen sizes using minimum and maximum breakpoint widths in media queries.

  @include media-breakpoint-only(md) { ... }

The above syntax means that CSS would be applied for devices with screen sizes between @media (min-width: 768px) and (max-width: 991.98px) { ... } (i.e medium sized devices such as tablets, desktops)

Between Breakpoints

Between breakpoints target multiple breakpoints.

  @include media-breakpoint-between(md, xl) { ... }

Above syntax results in @media (min-width: 892px) and (max-width: 1278px) { ... }, which means styles are applied starting from medium devices and up to extra large devices.

Advertisements