Still confused about the grid in Bootstrap 3

HTML & CSS
1

Hi I’m a beginner trying to create my own web layouts in Photoshop that are based on the Bootstrap 3 grid.

I’ve downloaded a few .psd files that mimic the Bootstrap 3 grid so you can based your designs around them.

I’ve also created an html grid using Bootstrap that you can see here http://juanchandler.com/grid-test.html view source to see the code.

My question is why the columns aren’t 70 pixels wide and a gutter width of 30 pixels as is the case with the .psd grids…I’ve taken a screenshot of the .psd grid with my html over the top so you can see how the columns don’t line up. http://juanchandler.com/screenshot3.jpg ie. the red / salmon columns are supposed the gutters but my html columns fall over them.

Hope someone can help.

2

I’ve never used Bootstrap, so I might be misunderstanding how things are meant to work, but here goes anyway. :slight_smile:

Your columns are not 70px wide because the CSS for them is declaring them at 8.33333%. (bootstrap.css, line 1157, according to Firebug.) So the width of the columns will depend upon the width of the containing element or the viewport.

bootstrap.css line 835:

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

Changing padding-left and padding-right to margin-left and margin-right does what you want.

3

You should never really change the bootstrap default files as the whole system is built on these rules being unchanged. You can modify them with over-riding classes for special cases but as a general rule of thumb the originals should remain untouched. :slight_smile:

The columns have gutters using padding so you should probably just nest an inner element in each column and colour that instead and it will then appear to have the 30px gap between columns. In most cases the bootstrap elements build a structure that you can then work within and rather than trying to modify the structure itself you just add your elements inside and style them accordingly.

I’m more familiar with bootstrap2 which does use margins for gutters and is a little easier to understand. Are you sure your psd files aren’t based on bootstrap2 as that has some default columns of 70px? Bear in mind though that the width of the columns is only based on the width of the viewport and will change as each breakpoint is triggered.

4

Thanks, Paul - I thought it might be something like that. As I said, I’ve never used Bootstrap - and I think I’ll be keeping well-clear in future. :wink:

5

Bootstrap2 isn’t too bad but the documentation on bootstrap3 is a little confusing even though its supposed to be the better version. It’s a bit like trying to tie your shoelaces with your hands tied behind your back :slight_smile:

6

:lol: That conjures up an interesting picture. :slight_smile: [ot]Oddly enough, I can tie my laces one-handed, but I suspect trying to do so with my hands tied behind my back would be beyond even my contortionist skills. :)[/ot]