Is it possible to override the grid system to use full width

Question

I use Twitter Bootstrap as a Css framework and think about why wasting this space when I can use it effectively when most monitors are now at 1280 X n resolution? I really like Bootstrap, that I don’t want to stop now and start the whole process of writing css for large screens again (or FULL SCREEN WIDTH, as my boss wants).

Is it possible to change / change to hack or call its name, css file for setting to full screen or less than 1200 pixels in size of about 940 pixels, which it uses now?

Answer 1

Well, that was easy, I used all the good stuff to style from Twitter Bootstrap, but split the Grid System into a replacement for the Zurb Foundation Grid System here . I have nothing more to lose than to get extra time without having to implement the site again for a mobile browser. Thanks SO community

Answer 2

Give a new value to the class after loading tw-bs.css

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

Answer 3

Another way I did this is to create a div with the fluid-span identifier, and then use the following jQuery to apply the appropriate span class for Bootstrap to the middle content of the column - in essence, this will always make the average content relative to the size of the browser window of the user :

 <div class="row"> <div id="fluid-span"> [content goes here] </div> <div class="span4"> [this is your right sidebar content] </div></div> 

And here is 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); }); 

Basically this is adding the corresponding span class to the div with the fluid-span identifier. Hope this helps anyone looking for a fix / fluid for Bootstrap!

One of the limitations of this is that it is not dynamic - if you change the size of the browser window, you need to refresh the page for the code to work. I'm sure someone with true jQuery skills could rewrite this better to do it :)