The Twitter Bootstrap 2.0-wip branch on GitHub includes a new responsive layout system. It's great for apps that need that level of responsiveness, but I'm developing a web-only app that needs to have a completely fixed layout.
Is there any easy way to override Bootstrap's responsive layout?
You can see it in action by cloning their repo, branching to 2.0-wip, and opening docs/scaffolding.html in your browser.
Thanks in advance!
Note, in 2.0.1+ the responsiveness has been moved to its own file, so it is turned off by default. To turn it on you include bootstrap-responsive.css or responsive.less.
http://twitter.github.com/bootstrap/scaffolding.html#responsive
Just remove the #media queries found in the bootstrap.css file on line 2684. That should eliminate all of the responsive qualities and just leave the standard container width intact.
#media (min-width: 768px) and (max-width: 940px) { ..... }
Just compile your own custom bootstrap on http://twitter.github.com/bootstrap/customize.html, unticking the responsive features.
Alternatively you can include following file from BootstrapCDN: http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap.min.css
Related
Simple Question: Bootstrap is now "Mobile-First". How do i change it back to "Desktop First" and by this I mean using the "Screen is lower than" approach rather than "screen is higher than". they do give some hints of this inside their own documentation with the media-breakpoint-down mixins, but I havent been able to get it to work.
Any help would be appreciated.
Later Edit: My question is just how do i modify the original files so I can get this result when I just build the bootstrap dist files with the npm build command from cmd. Thats all. I write my own css in a .css file separate from the bootstrap
Later Edit2: In case i wasnt clear with what I want, when you build bootstrap, the default it's using the #media-breakpoint-up system when it builds the media queries and how it's structuring the compiled css (no media query for mobile, min-width:576px and so on upwards). How do i make it compile it in reverse using #media-breakpoint-down so its no media query for above 1200px then lg for max 1199, and so on and do forth on the way down.
You can use:
#include media-breakpoint-down(xs) {
//your code
}
That will translate to:
#media (max-width: 576px) {
//your code
}
Where options are xs, sm, md, lg, xl for specific screens.
Is there a way to always force the mobile layout using only CSS in Bootstrap responsive?
I think one way to do it would be to set #screen-sm to a really large number. But I'd rather not mess with LESS files, can I do it using only CSS?
I ended up creating a custom bootstrap build using their website. Here's my version: http://getbootstrap.com/customize/?id=52279502e4625826d93b
If anyone has a better way of doing this, please share.
You have to use media query:
#media (max-width: 480px) and (min-width: 360px) {}
Atm I'm using col-lg, col-md, col-sm and col-xs
happens that col-xs is set to width 768px, I guess.
How can I create a new col-xxs or something smaller for eg. width 480px ?
You can use the following to accomplish this. I personally link to the bootstrap CDN in my projects and keep a local version of bootstrap so I can tap into its mixins for my site specific styles which is where I would place the following...
#media (max-width: $screen-xs-min) {
#include make-grid(xxs);
}
Just had exactly the same need and wondered why I had never had it before. This is a pretty in-depth discussion about it;
https://github.com/twbs/bootstrap/issues/10203
And I found the most useful gist to be from Jakobud here;
https://github.com/twbs/bootstrap/issues/10203/#issuecomment-42162250
Gists;
SCSS: https://gist.github.com/Jakobud/c057577daddbde4dd709
LESS: https://gist.github.com/wdollar/135ec3c80faaf5a821b0
I can't speak for the LESS version, I used the Sass version and it's been excellent.
Unfortunately #4dgaurav's answer is not enough to introduce new breakpoints when working with Bootstrap's LESS source. There's more code to just overriding variables.
If you are using LESS you could use these two additional breakpoints which work (tested!): https://github.com/brgrz/bootstrap-breakpoints
HTH
I am creating a website and I am trying to disable the responsive design feature. When I resize my browser, a few things get jumbled up, and I am not experienced with responsive design coding. Here is the link to my website
http://www.jiddrs.com
There is no simple answer to this, especially without knowing the code. It looks like the CSS for the search bar is out of place. Wordpress is a CMS that uses PHP to deliver content from the server. It compiles on a long running list of conditional statements that serve up content as needed.
Responsive CSS is completed by media queries. There's likely one stylesheet inside of your theme's folder labeled responsive.css or something similar.
Media queries look like this
#media screen and (max-width:640px) {
.classChange { style }
}
I created a web page using the bootstrap grid.
This page is rendered perfectly, as expected, when I just open it with a browser.
The container in bootstrap is smaller than the screen, everything is perfect.
BUT, if I render the exact same page as an application.html.erb layout in rails, it always send this message to the browser: #media (min-width: 1200px). This makes my page become a bit bigger than my screen. The rest is fine. Bootstrap works but the container width is too big! In the plain page it is 960px, which is perfect!
Why?
I don't want this to happen! It is really weird. I read some posts where people say it happened to them, but I have the two pages side by side and "inspect element" shows #media (min-width: 1200px) in the css of the "row" class in the rails page and nothing in the other!
I am totally not willing to hack the bootstrap css. I would just like to figure out what is happening and fix it ! I would really like to use it as a stylesheet and not as a gem...
thanks so much in advance!
P.S.:
In rails, I copied the bootstrap folder in my /assets/stylesheets/ directory
How about adding your own style in the file 'bootstrap_and_overrides.css.less' (or any other you have)?
In my own CSS, I have this:
.container {
width: 960px;
}
and the problem is solved. :)
Maybe the answers to my questions regarding Bootstrap & Rails provide you with some insight:
How to access Bootstrap Files individually
How to pass Bootstrap-Variables in Rails