Disable ONE of the Twitter Bootstrap responsive layouts

Question

I would like to disable one of the Responsive layouts. Whatever the second smallest layout is before it switches to the mobile view.

Answer 1

If you are compiling from the LESS files, this is quite easy. Open up responsive.less and under "MEDIA QUERIES" comment out or remove the @import declaration for whichever layout you don't want. For example, if you didn't want the Tablets to regular desktops one, the code would look like this:

// MEDIA QUERIES
// ------------------

// Phones to portrait tablets and narrow desktops
@import "responsive-767px-max.less";

// Tablets to regular desktops
// @import "responsive-768px-979px.less"; // commented this out because I don't like it

// Large desktops
@import "responsive-1200px-min.less";

After that just recompile bootstrap.less and you should be done.

If, on the other hand, you're not compiling from bootstrap.less and are using bootstrap-responsive.css directly, you can search for the media query for the specific device and remove/comment out that section.

For example, removing the portrait tablet one would look like (in bootstrap-responsive.css):

/* some CSS code above this */

.hidden-desktop {
  display: none !important;
}

/* comment out the following rule entirely in order to disable it */
/*
@media (max-width: 767px) {
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
}*/ /* stop commenting out, we want everything below this */

@media (min-width: 768px) and (max-width: 979px) {
  .visible-tablet {
    display: inherit !important;
  }

/* More CSS code follows */

To find out which @media query corresponds to which device width, take a look at http://twitter.github.com/bootstrap/scaffolding.html#responsive; the media queries are given there along with the device sizes they correspond to.

Answer 2

As an improvement to spinningarrow's way to do this when using LESS is to set the @gridColumnWidth768 and @gridGutterWidth768 to match @gridColumnWidth and @gridGutterWidth like so:

@gridColumnWidth768: @gridColumnWidth;
@gridGutterWidth768: @gridGutterWidth;

As a rule, I try to leave alone vendor files and only edit them as a last resort. This allows me to fix this issue without having to edit the core bootstrap files.