Friday, 5 June 2015

How make Bootstrap non-responsive




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.

No comments:

Post a comment