Bootstrap will provide the default Gutter width as 30px all the time and the grid consists of 12 columns. But in most of the case the default gutter width of bootstrap will not workout for us. So in this article we will see how to change the default Gutter Width in Bootstrap.
Default Bootstrap Gutter Width CSS code
.col-xs-1, .col-sm-1, .col-md-1 ...{more columns} {
padding-right: 15px;
padding-left: 15px;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
If you look at the bootstrap CSS code the default values are provided as 15px both right and left. Hence the gutter value will sum up to 30px when the columns are floated next to each other.
How to change the Default Gutter Width in Bootstrap?
Let’s take an example to change the Gutter width to 10px instead of 30px. The new classes for bootstrap column gutter width of 10px would look similar to the below example.
//10px Gutter
.gutter-10.row {
margin-right: -5px;
margin-left: -5px;
}
.gutter-10 > [class^="col-"], .gutter-10 > [class^=" col-"] {
padding-right: 5px;
padding-left: 5px;
}
If you notice the above code we have not used all the columns which bootstrap has used. Instead we have used a shortcut of CSS attribute selector. The CSS attributes selects the HTML elements with the specific attributes or attribute values.
In the above example we are using [attribute=”value”] selector which is used to select elements with the class names that match bootstrap’s column syntax. This would be shortest way to change the gutter width.
Usage of Resized Gutter Width Class
Using the new CSS classes for the newly created gutter is very simple. If you need to change the gutter width of any column all you need to do is add the class to the parent row and everything works perfectly without breaking the bootstrap grid.
<div class="row gutter-10"> <div class="col-md-6"></div> <div class="col-md-6"></div> </div>
Srinivas Ramakrishna
