Modify Bootstrap Default Width Framework

[toad78]

Please bump if this does not seem appropriate for this subject:

By default, the Bootstrap CSS framework is set to a width of 1170px. What if we’re dealing with designs that have a smaller width, i.e., 960px? How should the width of all the CSS code be modified to accommodate the 12-grid system?

[Paulie_D]

Modifying Bootstrap’s fixed px defaults would be incredibly hard and labor intensive.

You could use the fluid option and delete the options for over 960px.

Frankly, I would look for other options.

Why not use the 960.gs system?

One framework is not good for all designs.

[Alex]

If you wrap everything in a div class of container, then you can just overwrite whatever bootstrap has with your own size. It doesn’t even have to be .container but bootstrap uses that one one by default so all the settings are taken care of.

[toad78]

Paulie_D:
I’m just trying to get used to using different fluid/responsive design frameworks (gee, do I sound like a Rookie?) and would 960.gs be integratable with Bootstrap? Or am I set to learning a new framework because of the size of the design?

death180:
But doesn’t Boostrap need the ‘.container’ in order to modify the elements within it for responsive design?

[Paulie_D]

No the 960/gs is an alternative to Bootstrap.

One should use whatever grid system (even one you roll for yourself) is appropriate for the design.

https://css-tricks.com/video-screencasts/115-dont-overthink-it-grids/

[toad78]

I guess going with the adding a class to every that I’m assigning a span* would be my best bet.

[toad78]

Thanks for the link Paulie_D. I still have a lot to learn!

[NghiQuach]

bootstraps width becomes 960 if you take out the responsive component.

[toad78]

NghiQuach: enlighten a newb. How can that work and still be a responsive site?

[NghiQuach]

I just know if you customize the bootstrap to not include the responsiveness the width I think becomes 960 instead of 1170. To keep the responsiveness and have the width be 960, I’m assuming you would have to go in the LESS files and do the editing in there.

If you decide to change the container width to be 960 then you would have to recalculate all spans 1-12.

[toad78]

Which would be more work than it’s work. So in that case, I’m better off create a class to force a 960 width on all containers that are using the row/fluid-width classes, I presume?

[NghiQuach]

heres a good post on the google groups page on it. there are numerous solutions there.
https://groups.google.com/forum/#!topic/twitter-bootstrap/bmngDQDr7-Q

[toad78]

Excellent, NghiQuach! Thank you.

[Author]

Posts