How to turn off the responsive feature completely from Twitter Bootstrap 3?
responsive-design, twitter-bootstrap, twitter-bootstrap-3
Solution
EDIT: My code below was written for v3.0.0RC2, but in v3.0.0 the docs got a section specifically about this question: http://getbootstrap.com/getting-started/#disable-responsive
Use the `col-xs-X` classes since they are constant percentage widths. Then the responsiveness comes from `.container` using `max-width` at different media sizes. You can define your own alternative to `.container` and use everything else like normal:
Fiddle for the example below: http://jsfiddle.net/xTePL/
HTML:
<!-- Don't use .container at all or you will have to
override a lot of responsive styles. -->
<div class="container-non-responsive">
<div class="row">
<div class="col-xs-4">
<h1>Welcome to Non-responsive Land</h1>
</div>
<div class="col-xs-8">
<!-- More content, more content -->
</div>
</div>
</div>
CSS:
.container-non-responsive {
/* Margin/padding copied from Bootstrap */
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
/* Set width to your desired site width */
width: 1170px;
}
Problem
How can I turn off responsiveness in Bootstrap 3? I just want to develop a desktop version and when the size is different it should still appear like the desktop version. Twitter.com does this. If you try to resize, nothing happens to the UI while my site is redesigning all the elements. Example of how I want it: Anyway now how to turn off the responiveness? All help appreciated. Also recently read that in Bootstrap 2.0 you just remove responive boostrap CSS, but in 3.0 its baked into one css file. Thanks.