How to use Twitter Bootstrap 3 for non-responsive site

Introduction

As you know the new Bootstrap 3 is “mobile first”:

With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we’ve rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they’re baked right into the core. In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.

Well, how can we disable the responsive features? Bootstrap itself give you the answer here but it’s not so clear, so here we’re going to explain.

Step 1: Remove the viewport

This is simple. Remove (or just don’t add) the viewport <meta> in your HTML code.

Step 2: Remove the max-width on the .container class

Add this class in your CSS (or LESS) stylesheet:

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

The above class will overrides the default max-width attribute of the .container class.

Step 3: Fixing the navbars

Open variables.less and set the variables:

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

Step 4: Using the grid

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.

Step 5: IE8 (optional)

You’ll still need Respond.js for IE8 (since our media queries are still there and need to be processed). This disables the “mobile site” aspects of Bootstrap.