Reputation: 1024
I'm using the Bootstrap framework for a web application. The responsive design works very well for the primary part of our site which needs to work on smaller screens. However, there's an admin section where the responsiveness is both not that necessary (will be administered on desktops) and gets in the way (the forms/tables require tweaking to work at smaller sizes).
Is there an easy, scalable way to turn off bootstrap responsiveness for certain pages?
Right now, we have a single bootstrap .css file with the @sizing elements included. I could separate out boostrap.css
and bootstrap-responsive.css
and then only call responsive on pages that need it. I presume that would work, but would mean yet another setting (it's a cakePHP app).
Ideally, I'd like to assign a class to the body or main container that would override the responsiveness -- <div class="container non-responsive">
One other note -- I'm really only concerned about the responsiveness below 1024px in this case. The way it expands in larger screen sizes works well in the admin section.
Upvotes: 6
Views: 2906
Reputation: 3060
Separating them will be easier even though it's another setting. When you download Bootstrap from their home page (http://twitter.github.io/bootstrap/, instead of via their Customize page or via the GitHub project) it already separates the responsive styles into a separate file.
However, you can add your own styles that are more specific than each of the responsive styles in Bootstrap and override them. It could get hairy though because you'd basically have to repeat everything in bootstrap-responsive.css and override manually for each style property specified by Bootstrap's responsive file.
A better approach might be to edit bootstrap-responsive.css and prefix each style within the media query with ".responsive " and add the "responsive" class to the body element of the pages that you DO want to be responsive.
Hope this helps.
Upvotes: 5