Twitter bootstrap grid guide

Question

I am hoping someone can help me with this I am slightly confused with this I have always worked with 960 grid system. Making a Responsive design with Twitter Bootstrap, see the problem I am having is that the Desktop view on the twitter site states

Label Layout width Column width Gutter width Large display 1200px and up 70px 30px Default 980px and up 60px 20px Portrait tablets 768px and above 42px 20px Phones to tablets 767px and below Fluid columns, no fixed widths Phones 480px and below Fluid columns, no fixed widths

Surely it should be Default 960px and up? with 60*12 + 20* = 960px?

Is is there something I am missing or is it simply will need to use the customizer?

Basically should the size of my PSD be 940px still (as it would normally?) or should it be 960px?

Answer 1

Surely it should be Default 960px and up? with 60*12 + 20* = 960px?

If you allow for 20px padding before the first column, 20px between each each column and 20px after the last column the total is 12*(60+20) + 20 = 980px

should the size of my PSD be 940px still (as it would normally?) or should it be 960px?

Yes, design for 940px wide. As long as the device window is 980px or more it will display full width.

If you are coming from 960.gs, the design width is the same. The difference is that bootstap has an extra 10px margin at the start and end of every row so it needs a 980px wide window to display full width.

If you are looking for bootstap layout templates for the different widths, here is one good source https://benstewart.net/2012/06/bootstrap-responsive-photoshop-templates/

Answer 2

From bootstrap, this is correct...

• Large display 1200px and up
• Default 980px and up
• Portrait tablets 768px and above
• Phones to tablets 767px and below
• Phones 480px and below