Tips and Tricks: Bootstrap

Bootstrap

Change Gutter Width

From the bootstrap-documentation: Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.

Change to 2 pixel width:

You have to share the indented width into two parts and set them as padding and margin into container-, row- and content-div's:

.container {padding-left:1px;padding-right:1px;}
.row {margin-left:-1px;margin-right:-1px;}
.row > div {padding-left:1px;padding-right:1px;}

Change to 5 pixel width (or any other odd number):

You could share into two different values. For example 3 + 2. And set different margin and padding values for the right and the left paddings and margins. Another solution is to remove all the paddings and margins from the left side, and put the whole value into the right side:

.container {padding-left:0;padding-right:5px;}
.row {margin-left:0;margin-right:-5px;}
.row > div {padding-left:0;padding-right:5px;}