Tuesday, October 26, 2021
Home Fun With Programming Bootstrap Media Queries

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.

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.

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.

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.

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.

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:–

7 COMMENTS

  1. What’s Going down i’m new to this, I stumbled upon this I have found It positively useful and it has helped me out loads. I hope to give a contribution & assist different users like its helped me. Great job.|

  2. This is very interesting, You’re a very skilled blogger. I’ve joined your feed and look forward to seeking more of your magnificent post. Also, I’ve shared your web site in my social networks!|

  3. Hi, I do believe this is an excellent web site. I stumbledupon it 😉 I’m going to revisit yet again since I saved as a favorite it. Money and freedom is the best way to change, may you be rich and continue to guide others.|

  4. What’s Happening i am new to this, I stumbled upon this I’ve found It absolutely useful and it has helped me out loads. I am hoping to contribute & aid other users like its helped me. Great job.|

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Stay Connected

16FansLike
10FollowersFollow
414SubscribersSubscribe

Most Popular

Best Tricks For Play & Win Ludo

Ludo King Game has now become the world’s popular game. Everyone, children, old and young, like to play this game.

RTMP V/S RTSP V/S HLS

In this article we are going to differenciate RTMP , RTSP and HLS (RTMP V/S RTSP V/S HLS) so lets start.

How To Scroll to Top, to Bottom, to Specific Element In Ionic 5 Angular?

hello, friends once again I welcome all of you to today's How To Scroll to Specific Element In Ionic Angular? article on...

How To Delete Facebook Account Permanently?

Today we will know about one problem, which people keep talking about, today we will know how to delete Facebook account. With...

Recent Comments

headlamp flashlight on RTMP V/S RTSP V/S HLS