Is it possible to override Grid system to use Full width

Question

I am using Twitter Bootstrap as Css framework and thinking why waste that space when I can effectively use it when majority of monitors now are on resolution of 1280 X n? I love the Bootstrap so much that I don't want to stop now and start again whole process of writing the css for bigger screens (or FULL SCREEN WIDTH as my boss wants).

Is it possible to alter/change hack or u name it, the css file to adjust to full screen or least 1200Px sizes rather 940px it uses now?

Answer 1

Well that was easy, I used all the good stuff for styling from Twitter Bootstrap but stripped the Grid System to be replaced by the Zurb Foundation Grid System here. I had nothing more to lose than gain extra time by not implementing the site again for a Mobile Browser.Thanks SO community

Answer 2

Give a new value for the class after the tw-bs.css is loaded

.container {
  width: 1200px;
}
.container-fluid {
  min-width: 1200px;
}

Answer 3

Another way I have done this is to create a div with an id of fluid-span and then use the following JQuery to apply the appropriate Bootstrap span class to the middle column content - in effect, this will always make the middle content relative to the user's browser viewport size:

<div class="row">

<div id="fluid-span">

[content goes here]


</div>

<div class="span4">

[this is your right sidebar content]

</div></div>

And here's the JQuery:

$(function(){
var width = $(window).width(),
new_class = width >= 1571 ? 'span17' :
            width >= 1411 ? 'span15' :
            width >= 1251 ? 'span12' :
            width >= 995 ? 'span8' : 'span8';
$('#fluid-span').removeClass('span17 span15 span12 span8').addClass(new_class);
//alert(width);
});

What it basically does is append the proper span class to the div with the id of fluid-span. Hope this helps anyone out there looking for a fixed/fluid solution for Bootstrap!

One limitation of this is it is not dynamic - if you resize your browser window, you have to refresh the page in order for the code to work. I'm sure someone with true JQuery skills could rewrite this better to do that :)