Bootstrap breakpoints not working properly in the chrome inspector?

Question

EDIT: I am completely rewriting this question because I don't think I was being clear enough in my original posting.

According to bootstrap's website, the browser widths for each category of column should be as follows:

// 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) { ... }

// 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

In summary: col-xl is 1200 pixels and up, lg is between 992-1199, md is 768-991, sm is 576-768, and xs is up to 575.

My problem is that for some reason, my webpage is behaving as if xs is sm, sm is md, md is lg, and lg is xl.

View this codepen in the google chrome inspector: https://codepen.io/colesam/full/YxjVwW/

There should be three items per row in lg and up, sm and md should be 2 per row, and xs should be 1.

See below in two examples:

EDIT 2: My header includes the following meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

EDIT 3: I have now tried inspecting the page on two separate computers but I am getting the same result. I also updated Bootstrap but to no avail. I'm really quite baffled as to why this would be happening. I tried adding xl columns to the html and no matter how large the screen size, the xl columns would not activate.

Here is an image of the google chrome inspector tool. It shows that .col-md-* is activated even though we are within the bounds for lg columns:

Possible duplicate of [Not able to make bootstrap responsive design work with dotnetnuke](https://stackoverflow.com/questions/10700276/not-able-to-make-bootstrap-responsive-design-work-with-dotnetnuke) — ceejayoz, Aug 24 '17 at 16:10
I have this tag on my main project: but I didn't know I needed one for a codepen. I will update the codepen now. — Samuel Cole, Aug 24 '17 at 16:45

score 1 · Answer 1 · answered Aug 23 '17 at 14:02

1

Bootstrap is mobile-first, so there's

.col-xs-*
@media (min-width: 768px) { 
  .col-sm-*
}
@media (min-width: 992px) { 
  .col-md-*
}
@media (min-width: 1200px) { 
  .col-lg-*
}

for grid (col-*) classes instead of

@media (max-width: 575px) { ... }
@media (max-width: 767px) { ... }
@media (max-width: 991px) { ... }
@media (max-width: 1199px) { ... }

answered Aug 23 '17 at 14:02

Eugene Voynov

350
4
11

1

I don't understand. If the breakpoints you are posting are the bootstrap breakpoints why do they have different breakpoints on their website? – Samuel Cole Aug 23 '17 at 14:35
Why? [This is a link](http://v4-alpha.getbootstrap.com/layout/overview/#responsive-breakpoints) for Bootstrap4 documentation or [this](http://v4-alpha.getbootstrap.com/layout/grid/#grid-options) (Look at first row, there's "equal or great than" operator). As you can see they said "These breakpoints are mostly based on MINIMUM viewport widths..." and "We occasionally use media queries that go in the other direction (the given screen size or smaller)". I've just looked for bootstrap code. They are use "max-width" breakpoints only for "navbar-*" and "hidden-*" classes. – Eugene Voynov Aug 24 '17 at 08:58
According to your link large is >= 992 pixels. In my second image all of the col-lg-* css is broken even though it should still be within that range. – Samuel Cole Aug 24 '17 at 14:52

score 1 · Accepted Answer · answered Aug 25 '17 at 14:26

It turns out I was looking at the breakpoints for Bootstrap v4+ when I have been using version 3.3.7.

For Bootstrap 4 all of the breakpoints were shifted to make room for col-xl-*.

The Bootstrap 3 breakpoints are:

/* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}

score 0 · Answer 3 · answered Sep 21 '20 at 13:24

<style>
       body{
   background: #007bff;
   }
 @media screen and (min-width: 576px){
   body{
   background: #007bff;
   }
  }
  @media screen and (min-width: 768px) {
  body{
  background: #dc3545;
   }
  } 
 @media screen and (min-width: 992px) {
   body{
  background: #28a745;
  }
 }
 @media screen and (min-width: 1200px) {
   body{
  background: 6f42c1;
  }
 }
</style>

Bootstrap breakpoints not working properly in the chrome inspector?

3 Answers3