Bootstrap Grid Question?


#1

Hi all!

Newbie here. I’m currently studying Bootstrap and have a question on the grid system. I’ve created 3 buttons with the class col-xs-4 and this is the result I’m getting:

I’d like to ask why there are spaces between the buttons? If the grid is 12 units wide, shouldn’t there be no spaces considering I’ve created 3 buttons which are all 4 units wide (4 units x 3 buttons = 12 units)? It would also be great if you can tell me how to reduce the size of the white space between the buttons.

Thanks!


#2

There are spaces there because the col-* classes have some left and right padding. Here the padding is highlighted in purple:

But there isn’t really any space between the elements, since their margins are 0. The padding is what gives the space that you see.

You can reduce this space by reducing the side padding of the columns.

.col-xs-4 {
  padding-left: 5px;
  padding-right: 5px;
}

#3

Thanks kevcomedia, that worked like a charm. Would you know where I can look up the default values (such as button padding) for Bootstrap classes?

Sorry if this is a newbie question; I’m still wrapping my head around the concept of frameworks, CSS extensions, and basically anything that’s outside basic of HTML, CSS, or Javascript.


#4

I don’t know where to look for such values other than this page. You could download the compiled Bootstrap stylesheet and examine it, but it’s fairly large. You could also examine the styles applied by Bootstrap by heading over your browser’s dev tools and examining the styles of the page (like I did in the screenshot above).

No worries. Ask away!


#5

Thanks! The latter works very well for me.