I need to make it so Twitter Bootstrap doesn't go on responsive mode when I hit a resolution below 1024px. In other words, I want the horizontal sidebar to show up and not touch my rows or columns.
I have some conditionals with higher resolutions that I manage to achieve using the online LESS compiler, so I assume this can be done.
Which flag will I have to modify in order to do this?
This will help to avoid responsiveness on smart phones and tablets.
<meta name="viewport" content="width=1024">
Also remove initial-scale=1and other values.
Add a container for everything, and set a min-width.
<style>
.page-container {
min-width: 1024px;
}
</style>
<body>
<div class="page-container">
...
</div>
</body>
Probably posting much too late, but I was also attempting to do the same thing. If you follow these instructions via Bootstrap you will have a layout that stops being responsive below 1024px.
The Bootstrap docs have a guide for disabling responsiveness.
Omit the viewport <meta> mentioned in the CSS docs
Override the width on the .container for each grid tier with a single width, for example width: 970px !important; 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, remove all navbar collapsing and expanding behavior.
For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.
Related
In Bootstrap 4 change log I see
Non-responsive usage of Bootstrap is no longer supported.
What should that mean? How do I know when some usage is (non-)responsive?
You can disable the responsive in Bootstrap 3 by the following steps,
and this is the non-responsive usage you mentioned.
Source:
Omit the viewport <meta> mentioned in the CSS docs
Override the width on the .container for each grid tier with a single width, for example width: 970px !important; 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, remove all navbar collapsing and expanding behavior.
For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.
Here's the official example.
In Bootstrap 4, these might break the styles since the Non-responsive usage is no longer supported.
You can disable responsiveness of bootstrap by removing the following meta tag from website page.
<meta name="viewport" content="width=device-width, initial-scale=1">
Here is the link : Disabling responsiveness
thank you for your support. I have created one litte bootstrap page.
I have only two little problems. The logo position on the desktop browser is different to the position on the mobile device (iphone).
i found out that if you change the css code "bootstrap.min.css" from the container-fluid - padding-left:15px; to padding-left:0px; the logo will be at the correct position on the desktop browser but on the wrong possition on the mobile device.
sample image
do you have any ideas to solve this problem?
The reason why you are experiencing this is because twitter bootstrap utilizes media queries. A media query essentially allows for a css class or id to have differing stylings for different screen widths.
To fix this you could go in and alter every media query in the minified code to fit your requirements. A better solution however, is to write your own css in a separate file that over rides the bootstrap.
Example
So here is a div with container fluid
<div class="container-fluid example">
// your div content
</div>
Here is your css that will override the padding left.
.example {
padding-left: 0px;
}
when i designed my website, i made the mistake of going non-responsive (http://getbootstrap.com/examples/non-responsive/) because i didn't know much about it. now, i realize that was a mistake and i'd like to correct it. my main problems are:
i use col-xs all throughout the website.
besides the bootstrap.min.css file, i use a custom CSS file with the following:
for the default CSS, i use:
body {
min-width: 970px;
}
...
which is pretty similar to http://getbootstrap.com/examples/non-responsive/non-responsive.css
and then farther down I have:
#media (min-width: 1200px) {
(some more custom CSS here, mainly font sizes)
}
what's the easiest way for me to convert this website to responsive? i am guessing i might need to edit all the tags and add col-md, col-lg, am i correct?
any help and advice would be greatly appreciated to correct this dummy's big mistake :)
short explanation of the grid-system in bootstrap:
like you already know there are several classes for different viewports.
but you don't need all of them actually:
for example - if you have 3x col-lg-4 and resize your browser under 1170px these boxes won't float, they will break.
if you have 3x col-md-4 and resize browser under 970px these boxes won't float anymore.
col-xs will always float and is always horizontal and will never break.
You also forgot to mention if you want to go full-fluid responsive or breakpoint-responsive what would make a difference in using the .container-classes.
.container-fluid is for full fluid design and .container is for pages with 1170px max width.
I am currently using this template from Bootstrap 3: Bootstrap Dashboard Template
It's using the .container-fluid class, which is making the template fluid/responsive.
My question is - I want to benefit from the full-width template, but I don't want to support the responsive layout.
I wish to achieve this template layout:
How can I do this, without having to deal with the responsive stuff?
The bootstrap documentation has a paragraph to disable responsiveness.
Steps to disable page responsiveness
Omit the viewport <meta> mentioned in the CSS docs
Override the width on the .container for each grid tier with a single width, for example width: 970px !important; 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, remove all navbar collapsing and expanding behavior.
For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device
grid scales to all resolutions.
As the title suggest, I'm having issues with creating my website.
It's currently at the design stage and I'm having problems upon putting my browser into windowed mode.
Everything sort of re-aranges it self. If you scroll a bit you see some sections falling out of order.
I don't know what I did wrong, but I would very much like to fix this issue.
This is the link to my website as it stands:
http://www.dennis-website.co.nf/index.html
There's no minimum width set to the overall site. Your #container_main has width set at 1002px where as the rest of the site doesn't so the header and menu will collapse to the browser's width. You can quickly solve this by setting
#wrapper {
min-width: 1002px;
}
So the overall site has a minimum width.
You need to use Media queries to adjust the font size, width of the elements and much more for various screen resolutions.
Example: http://webdesignerwall.com/tutorials/css3-media-queries
You have to make a responsive design website to overcome this issue. Here is a great book on Responsive Design by Ethan Marcotte. It will cover all topics of how to make responsive grid, responsive images and media queries + this is only 150 pages small free pdf :D
<div id="nav">
Your CSS must be:
#nav
{
width:100%
}