Twitter Bootstrap & rails - center content and fix min width
In my html the content should be centered on screen and his width should never be greater then 950px.
Since I want this same html to show on mobile and desktop I am using twitter bootstrap to make the layout responsive.
The problem is: I cant seem to make the content div to be centered AND have the max width of 950px.
When I open on a browser the css has this media query:
@media (min-width: 1200px)
that makes my div always fit the entire screen.
How can I fix this?
Basically what I want to do is something like this:
The orange line is the container (or body) and the blues are the rows
Thanks for any help.
EDIT
Just something I found that maybe help someone to help me
If I comment out this line:
@import "twitter/bootstrap/responsive";
my div.content keeps the 950px width but my html loses its responsive behavior, which I don't want
EDIT 2
The html markup:
<html>
<body>
<div class="container">
<div class="row">
<div class="span12">
<%= Content goes here %>
</div>
</div>
</div>
</body>
</html>
but on the browser it creates this things:
body = 100% width, on chrome 1280px
.container = width 1170px
.row = width 1200px
.span12 = width 1170px
Just to clarify, this is not a problem on twitter bootstrap, this is a problem on twitter-bootstrap-rails
The way I found to fix it on development is open the twitter-bootstrap-rails gem with gem-open and change the file: /vendor/toolkit/twitter/bootstrap/responsive.less commenting out these lines:
// LARGE DESKTOP & UP
// ------------------
@media (min-width: 1200px) {
// Fixed grid
#grid > .core(70px, 30px);
// Fluid grid
#grid > .fluid(5.982905983%, 2.564102564%);
// Input grid
#grid > .input(70px, 30px);
// Thumbnails
.thumbnails {
margin-left: -30px;
}
.thumbnails > li {
margin-left: 30px;
}
}
Answer
You could use the wrapper this will give you a default size of 940px.
<body>
<div class="container">
...
</div>
</body>
But if you are looking to a custom width, you should add some css in your application.css like this:
body .container{
width:980px;
}
Check it out here: Bootstrap - Layout
A nice tutorial for layout: Filling layout with bootstrap