Disable ONE of the Twitter Bootstrap responsive layouts

twitter-bootstrap

Solution

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.

Problem

Original source