There is a lot of stuff out there on making BS3 non responsive but it all seems to focus on LESS variables. I'm using static CSS though.
http://getbootstrap.com/examples/non-responsive/
http://bigwilliam.com/turn-off-responsive-behavior-for-bootstrap-3/
Steps 1 (remove viewport) and 2 (static container width) are easy enough. But how do I set the media query breakpoints in CSS?
There's an option in Bootstrap to customize your download of Bootstrap CSS to fit your needs. If you press the link customize along Bootstrap's website, it will take you to a page that lists all the components and utilities that come included with the default download of Bootstrap CSS. You can add/remove any of these items to create a version of bootstrap that fits your particular needs.
For you case, remove the following options (Under Common CSS):
Print Media Styles
Responsive Utilities
There is also a section where you can customize and compile the LESS variables into a custom .css file. The one you could consider changing is the Media Query Breakpoints settings, but there are lots of customization options for you to browse through.
Take a look here at Bootstrap/Customize to see all the options you can change, and hopefully that will help!
set minimal width to html or body element, in that way page won't resize if browser width is less than min-width specified. but whole point using bootstrap is to easily develop responsive websites, so you are doing something terribly wrong if you want not responsive bootstrap.
html { min-width: 1000px; }
Related
I am now having a lot of troubles with Bootstrap. I used to use it to build a website once and then I have never used it again. But now, I have to use it. I downloaded the compressed version and include JS and CSS file in my project.
Here is the problem. I don't know how to customize it effective. For example, I create a navbar that is much higher (height:90px;) than the bootstrap default navbar. Hence, I have to modify the padding of the navigation panel on the navbar and when the navbar is collapsed, the items in this collapsible navbar are aligned incorrectly due to the padding and margin modification for the large screen.
I have one solution in my mind. May be I have to modify the media query padding and margin or if you have other effective ways to do it. Please tell me.
Create a file with overrides that you load after the bootstrap file. The override file will redefine the bootstrap classes you want to change. It's important that you load the override file after the bootstrap file.
Just linking Your own CSS file, and insert your custom class to the element. And then styling your custom class & avoid to override default class provided by bootstrap itself. This is my practice when using bootstrap or another CSS Framework.
Never have problem so far. Good luck for your project.
I am using Bootstrap 3 in my WordPress theme.
Most of the site will make use of the responsive features, but for a few pages that host data visualizations I would like to force a fixed width.
How would I set this non-responsivity up?
(Would be nice if there was some sort of body class (.non-responsive) that could take precedence over the responsive features?)
There is a section in Bootstrap docs about disabling responsivness:
http://getbootstrap.com/getting-started/#disable-responsive
Steps to disable responsive views
To disable responsive features,
follow these steps.
Remove (or just don't add) the viewport <meta> mentioned in the CSS
docs
Remove the max-width on the .container for all grid tiers with
max-width: none !important; and set a regular width like width:
970px;. Be sure that this comes after the default Bootstrap CSS. You
can optionally avoid the !important with media queries or some
selector-fu.
If using navbars, undo all the navbar collapsing and
expanding behavior (this is too much to show here, so peep the
example).
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. You'll
still need Respond.js for IE8 (since our media queries are still there
and need to be picked up). This just disables the "mobile site" of
Bootstrap.
What about this?
.non-responsive { width: 800px !important; } //or whatever width you want it to be
I was wondering how would I make a asp.net drop down list responsive. And by that I mean when I am on my smart phone it will format its width to fit the screen, and when i am on a tablet it would do the same and so on.
Any examples would be great.
Thanks for the help
Step 1: Add one or more CSS classes
You'll need to start by adding a CSS class to the dropdown list control (hereafter referred to as 'the control'). This can be done by adding one or more classes to the CssClass attribute in the control. Additionally you should take a look at conditional CSS statements.
Step 2: Add the usual responsive design styles to the class
A basic responsive design style is something like this
.responsiveWidth{width:100%;max-width:950px;min-width:650px;}
Things to remember...
Just remember that when using max- and min-width, it is expected that if you use a percent for width , then you should use an explicit width for max-width and min-width. This goes both ways, so you could do:
.reponsiveWidth{width:900px;max-width:100%;}
...which would keep the control at 900px width unless the screen width drops below 900px.
Bonus Info:
Here are some links that I have in my "Responsive Design" folder in my bookmarks...
Tips
7 Responsive Design Tips to Enhance Your Workflow
How to use conditional CSS statements
5 Useful CSS Tricks for Responsive Design
References
W3C CSS Conditional Rules Module Level 3
Advanced Conditional Statements
Give it a css class and set the width to a relative size. (100% for example)
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.
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.
It's noticeable when using the "Hot Towel" SPA template with Durandal that the views sit in a middle window that's 1100 pixels in width rather than using all the available space.
And yet all the views within the applicationHost are set to use the Bootstrap from Twitter "fluid" styles. Effectively a hard-coded max-width set on the body tag is making all these fluid styles redundant and rather meaningless.
It's easy enough to over-ride the body style set in app.css (assumming there will be no side effects to setting it to a ridiculously high value) but I was just wondering if anybody knew the reason for setting it this way in the template, given that it's undoing all the good work of trying to implement a responsive design that all those Bootstrap "*-fluid"styles are trying to implement.
No particular reason. Feel free to remove it if the layout still appeals to you. You can submit a pull request on github for changes too, as HotTowel is open source.