How to change the Default Gutter Width in Bootstrap?

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>

 

0 Shares
Leave a Reply

Your email address will not be published. Required fields are marked *

You May Also Like
XOR in Python

XOR in Python

XOR Operator in Python is also known as “exclusive or”  that compares two binary numbers bitwise if two bits are…
How To

How to configure Git proxy?

If you are working in the corporate company all the internet requests usually goes through the corporate firewall.…