20

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: enter image description here

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.

Rubens Mariuzzo
  • 28,358
  • 27
  • 121
  • 148
user023
  • 1,450
  • 2
  • 17
  • 21
  • 1
    Just use `.col-lg-` inside `.row`, not `.col-sm` or `.col`. Other thing you can do is simply search for `@media` calls and delete them and all inside. – RaphaelDDL Aug 09 '13 at 12:32
  • thanks for you reply. im using .col-lg- inside of a .row already, still it goes to responive. also tried to delete the @media things. no difference thought. – user023 Aug 09 '13 at 13:32
  • 1
    The `.col-lg-X` and `.col-sm-X` classes change widths and stop floating at different media widths. You want to stick to the plain `.col-X` classes, which always float and have constant percentage widths that don't change based on media. See if my answer below is what you are looking for. – Ross Allen Aug 09 '13 at 19:07
  • 4
    With the 3.0 full release, the Bootstrap team added a section to the docs describing how to achieve this: http://getbootstrap.com/getting-started/#disable-responsive – Ross Allen Aug 19 '13 at 22:24

4 Answers4

46

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;
}
Ross Allen
  • 43,772
  • 14
  • 97
  • 95
  • 3
    With v3.0.0RC2 the col-X classes should be replaced with col-xs-X – Bass Jobsen Aug 21 '13 at 20:41
  • This doesn't do anything. Can't you just set a width on .container and be done? – Moss Apr 11 '14 at 17:58
  • @Moss Nope. Don't know why yet, but just setting the width won't do it. Ssorallen's answer worked like a charm, though. Thanks! – KidBilly Jan 19 '15 at 14:35
  • When you use col-xs-\*, The relative width makes the content responsive. Any sol for this? Am comfortable using col-xs-\* for layouts & positions. – Aravind Sep 15 '15 at 06:11
13

Here's what worked for me:

<meta name='viewport' content='width=1190'>

I wanted a bit of a margin around my content so I also did

.container{
  width: 1150px !important;
}

Tested it on iPad and iPhone.

machineboy2045
  • 349
  • 4
  • 4
1

I like the (accepted) solution of @ssorallen. This solution don't turn of all responsive features off as asked.

The @grid-float-breakpoint (default at 768px) will let your menu collapse and sets the alignment of form labels based on screen width. The width of your modals and carousels depend on this setting also.

For more information, see: http://bassjobsen.weblogs.fm/compile-twitters-bootstrap-3-without-responsive-features/

update check the link below from @skelly too. Note this still don't change the grid-float-breakpoint neither does this solution reduce code. Further versions of TB3 will split up some less files maybe. This will make it easier to compile a non-responsive version.

Community
  • 1
  • 1
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • 2
    There is also now some guidance for this is the Bootstrap docs: http://getbootstrap.com/getting-started/#disable-responsive – Carol Skelly Aug 17 '13 at 17:49
  • @Skelly. Thanks for adding this link. This solution doesn't reset the `@grid-float-breakpoint` and neither not reduce the code. – Bass Jobsen Aug 17 '13 at 21:18
1

Just search for disable all media queries and comment them out in the bootstrap.css file. It doesn't take more than a few minutes.

Then you need to set a fixed width to the outer div that sets your page content. This is usually .container in bootstrap or something like #wrapper is also common. 960px or what ever is right for your site.

You also need to remove or comment out the meta viewport tag in your HTML head. If there isn't one then that's also fine (although you will need to add one to make if you want it responsive). It looks like this:

Sharma
  • 11
  • 1