bootstrap 3 works on the mobile first approach. so my desktop css is dependant on my css for smaller devices. I would like to disable responsiveness when the desktop browser window resizes but cant figure out how. I was directed to which solved half the problem.

the width of the page issue has been fixed by the following

var desktop = screen.availWidth >= '768';
if(desktop)
{
  l=d.createElement('link');
  l.rel  = 'stylesheet';l.type = 'text/css';
  l.href = 'styles/desktop.css';
  l.media = 'all';
  h.appendChild(l);

}

desktop.css

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

but it is still re-flowing my content because bootstrap is still picking up my column classes when the browser window resizes to the respective media query. eg col-sm-4, col-sm-offset-4. i could use javascript to change the col-sm to col-xs when it detects a desktop but offsets and column ordering are disabled for extra small devices.

would i have to write my own css overiding all unwanted boostrap?

/

please, any suggestions would be greatly appreciated.
thank you in advance.

bootstrap 3 works on the mobile first approach. so my desktop css is dependant on my css for smaller devices. I would like to disable responsiveness when the desktop browser window resizes but cant figure out how. I was directed to http://getbootstrap./getting-started/#disable-responsive which solved half the problem.

the width of the page issue has been fixed by the following

var desktop = screen.availWidth >= '768';
if(desktop)
{
  l=d.createElement('link');
  l.rel  = 'stylesheet';l.type = 'text/css';
  l.href = 'styles/desktop.css';
  l.media = 'all';
  h.appendChild(l);

}

desktop.css

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

but it is still re-flowing my content because bootstrap is still picking up my column classes when the browser window resizes to the respective media query. eg col-sm-4, col-sm-offset-4. i could use javascript to change the col-sm to col-xs when it detects a desktop but offsets and column ordering are disabled for extra small devices.

would i have to write my own css overiding all unwanted boostrap?

http://jsfiddle/zVAEe/

please, any suggestions would be greatly appreciated.
thank you in advance.

• javascript
• css
• twitter-bootstrap
• twitter-bootstrap-3

Share Improve this question Follow edited Sep 26, 2013 at 18:07 Anshad Vattapoyil 23.5k1919 gold badges9090 silver badges134134 bronze badges asked Sep 26, 2013 at 12:55 TarranJonesTarranJones 4,25222 gold badges4141 silver badges5656 bronze badges 9

• 1 Why don't you just read their docs? getbootstrap./getting-started/#disable-responsive – Tigran Petrossian Commented Sep 26, 2013 at 12:56
• or try github./bassjobsen/non-responsive-tb3 – Bass Jobsen Commented Sep 26, 2013 at 12:59
• 3 possible duplicate of Bootstrap 3 - non-responsive? – Bass Jobsen Commented Sep 26, 2013 at 13:01
• 1 It's not clear what the problem is (or why you're writing JavaScript to do something which Twitter themselves say is a CSS/HTML thing). Show us a demo, or tell us what fails with the provided fix. My guess is that you missed or misunderstood a step. – isherwood Commented Sep 26, 2013 at 15:04
• firstly thank you for directing me to the docs which did fix half my problem, i have read them and even though I don't like to read! as i said i could use .col-xs-* but that doesn't help me distinguish between a desktop browser resize and a mobile device. i added a jsfiddle. please feel free to edit as I'm obviously missing something. – TarranJones Commented Sep 27, 2013 at 7:43

 |  Show 4 more ments

1 Answer 1

Sorted by: Reset to default 1

Yes, you need to rewrite some of the CSS in desktop.css. This is pretty easily done as you could copy CSS from bootstrap's CSS file and just redefine what you want.

I checked you jsfiddle. Add this CSS to desktop.css and it works:

.col-sm-4 {
    width: 33.33333333333333%;
    float: left;
}

.col-sm-push-4 {
    left: 33.33333333333333%;
}

.col-sm-pull-4 {
    right: 33.33333333333333%;
}