Bootstrap 3 - remove breakpoint between md and lg

Question

I'm using Bootstrap 3 and trying to remove/exclude the breakpoint between medium and large devices. I have a existing website which is optimised to 970px which looks great. What I am trying to do is remove the md > lg breakpoint so that even on large widescreen desktops the maximum body width is 970px and still centred.

Anyone know if there is a quickfix solution to this?

Any advice would be much appreciated

Decbrad

Answer 1

If you're overriding the bootstrap breakpoint (and using containers properly), adding this below the bootstrap breakpoint media queries in the bootstrap CSS file should work for you.

If using LESS

@media (min-width: @screen-lg) { 
  .container {
      width: 970px;
   }
}

OR, you can simply override the bootstrap container in your own CSS (just make sure you load it after bootstrap.css)

@media (min-width: 970px) and (max-width: 2500px) {
   .container {
      width: 970px;
   }   
}

OR you can find the media query in the bootstrap.css file on around line 1240 and simply change it there

@media (min-width: 1200px) {
  .container {
     width: 1170px;  /* change 1170 to 970 */
  }
}

Answer 2

the less way is good but this one is more flexible and reliable:

@media (min-width: @screen-sm) { .container { width:@screen-md; } }

Because in bootstraps default values the width of @screen-md is 992px. Now you will just have a breakpoint for small devices (smartphones) and any other bigger devices. they will all get the same layout

Answer 3

You can set a max width on the containers:

.container-fluid,
.container {
  // Disable large-desktop breakpoint.
  max-width: $container-md;
}

No need for media queries or anything.

The $container-md value is typically 970px, unless you changed the $grid-gutter-width. For LESS, replace the $ of variables with an @. For regular CSS, replace the variable with the hard coded pixel size.