How to remove responsive features in Twitter Bootstrap 3?

Question

Since Bootstrap 3 there's no longer seperate files for responsive and standard stylesheets. So how can I easily remove the responsive features?

Answer 1

To inactivate the non-desktop styles you just have to change 4 lines of code in the variables.less file. Set the screen width breakpoints in the variables.less file like this:

 // Media queries breakpoints // --------------------------------------------------  // Extra small screen / phone // Note: Deprecated @screen-xs and @screen-phone as of v3.0.1 @screen-xs:                  1px; @screen-xs-min:              @screen-xs; @screen-phone:               @screen-xs-min;  // Small screen / tablet // Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1 @screen-sm:                  2px; @screen-sm-min:              @screen-sm; @screen-tablet:              @screen-sm-min;  // Medium screen / desktop // Note: Deprecated @screen-md and @screen-desktop as of v3.0.1 @screen-md:                  3px; @screen-md-min:              @screen-md; @screen-desktop:             @screen-md-min;  // Large screen / wide desktop // Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1 @screen-lg:                  9999px; @screen-lg-min:              @screen-lg; @screen-lg-desktop:          @screen-lg-min; 

This sets the min-width on the desktop style media query lower so that it applies to all screen widths. Thanks to 2calledchaos for the improvement! Some base styles are defined in the mobile styles, so we need to be sure to include them.

Edit: chris notes that you can set these variables in the online less compiler on the bootstrap site

Answer 2

This is explained in the official Bootstrap 3 release docs:

Steps to disable responsive views

To disable responsive features, follow these steps. See it in action in the modified template below.

1. Remove (or just don't add) the viewport <meta> mentioned in the CSS docs
2. Remove the max-width on the .container for all grid tiers with max-width: none !important; and set a regular width like width: 970px;. Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
3. If using navbars, undo all the navbar collapsing and expanding behavior (this is too much to show here, so peep the example).
4. For grid layouts, make use of .col-xs-* classes in addition to or in place of the medium/large ones. Don't worry, the extra-small device grid scales up to all resolutions, so you're set there.

You'll still need Respond.js for IE8 (since our media queries are still there and need to be picked up). This just disables the "mobile site" of Bootstrap.

See also the example on GetBootstrap.com/examples/non-responsive/