Brendan Vogt
Brendan Vogt

Reputation: 26028

Flexibility of Twitter Bootstrap Layouts

I am currently using the Yahoo user interface (YUI) grids for my layouts. I find it really easy using these grids. There is no fuss in getting in a layout of (for example) 1350px, centered. And then I can add a left nav coloumn of 300px and right main column of 1050px.

I like the look and feel of the Twitter Bootstrap. I would like to try out the full package (only using the controls that I need). I would like to start with the layout. I have tried to find articles on how to set the width to the width that I need it to be. How would I set the width to something like 1350px. Or maybe 1500px wide. I don't want the width to adjust itself based on the width of the screen. I don't mind the scroll bars at the bottom of the browser. And a left nav of 300px and the rest to fill up the 1050px.

Is something like this possible in Bootstrap? What are your opinions on using the layout of Bootstrap compared to other layouts.

The 1350px is just a demo width, I just want to know if Bootstrap can handle any width that I want it to be. Just how flexible is Bootstrap layouts?

Upvotes: 0

Views: 546

Answers (2)

Tilo Mitra
Tilo Mitra

Reputation: 2793

You should use the YUI Grid Builder instead. :)

http://yui.github.com/gridbuilder/

Full Disclosure: I made it.

Upvotes: 1

Raphael Rafatpanah
Raphael Rafatpanah

Reputation: 19967

I struggled with this myself and wrote a full answer here: How to Change Default Bootstrap Fluid Grid 12 Column Gutter Width

Hope this helps!

Basically, all column and gutter widths are set in variables that you can customize. The only thing you can do is to set the column and gutter widths to what you want and specify one, two, three, four... etc. columns wide for your Left Column or Content Column, etc.

And to have a width that is not fluid, you simply use class="row" instead of class="row-fluid"

But once you have set the gutter widths and column widths, you can't easily specify widths. Only multiples of the columns plus each corresponding gutter.

Upvotes: 1

Related Questions