Bootstrap Media Queries

Since Bootstrap is developed to be mobile-first, we use a handful of media queries to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.

Bootstrap primarily uses the following media query ranges — or breakpoints — in our source Sass files for our layout, grid system, and components.

Bootstrap Media Queries (Responsive Breakpoints in Bootstrap)

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Other direction of responsive breakpoint Media Queries in Bootstrap

We occasionally use media queries that go in the other direction (the given screen size or smaller):

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

Minimal and Maximal Responsive breakpoints Media Queries in Bootstrap

There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Bootstrap Media queries for multiple breakpoints widths

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

Media Queries Example in Bootstrap

Resize the screen to see the effect of bootstrap responsive breakpoints media queries.

HTML Code

<!-- Grid row -->
<div class="row">

  <!-- Grid column -->
  <div class="column mb-4 px-2">

    <div class="p-4 bg-success text-center text-white">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

  </div>
  <!-- Grid column -->

  <!-- Grid column -->
  <div class="column mb-4 px-2">

    <div class="p-4 bg-danger text-center text-white">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

  </div>
  <!-- Grid column -->

  <!-- Grid column -->
  <div class="column mb-4 px-2">

    <div class="p-4 bg-info text-center text-white">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

  </div>
  <!-- Grid column -->

  <!-- Grid column -->
  <div class="column mb-4 px-2">

    <div class="p-4 bg-dark text-center text-white">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

  </div>
  <!-- Grid column -->

</div>
<!-- Grid row -->

CSS Code

@media (max-width: 767px) {
    .column {
        width: 100%;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .column {
        width: 50%;
    }
}
@media (min-width: 1025px) {
    .column {
        width: 25%;
    }
}

Create Responsive Layout using Bootstrap | Bootstrap Media Query Explained With Example in Hindi

Read More:–

• Glimpse About Computer Network
• About COBOL Language
• CV VS RESUME – Key Difference
• C vs C++ – Which is better ?
• Best 10 Browser Extension for Developer/Web Designer in Hindi