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

Question

As you can read on their page, 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.

How can I disable the responsiveness? I want that my site will not rearrange itself for tablet or mobile.

Solution 1

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.

Solution 2

Without major mods to the source, it just doesn't seem possible.

The following link details the changes needed: http://bassjobsen.weblogs.fm/compile-twitters-bootstrap-3-without-responsive-features/

Solution 3

The Bootstrap 3 docs actually contain a paragraph for this issue: http://getbootstrap.com/getting-started/#disable-responsive

Solution 4

Well, I was looking for the same thing. I haven't checked it out yet, so I can't attest to it's functionality, but here is a version with responsive taken out:

https://github.com/bassjobsen/non-responsive-tb3

View more solutions