How to use Twitter Bootstrap 3 for non-responsive site? [duplicate]

For a more explained procedure see How to use Twitter Bootstrap 3 for non-responsive site

From Bootstrap documentation (plus some explanations):

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

self-explanatory

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.

Add this style:

.container{
  max-width: none !important;
  width: 970px;
}

3) If using navbars, undo all the navbar collapsing and expanding
behavior (this is too much to show here, so peep the example).

Open variables.less and set the variables:

@grid-float-breakpoint to 0

@screen-xs-max to 0 (this will be fixed; read here)

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.

self-explanatory

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.

Leave a Comment