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>


Leave a Reply

Your email address will not be published.

Sign Up for Our Newsletters

Get notified of the best deals on our WordPress themes.

You May Also Like
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. The Git will simply throw an error saying “Request timeout” whenever you…
View Post
Sort Dictionary By Value In Python

Sort Dictionary by value in Python

Table of Contents Hide Python sorted() function to rescueSyntax: sorted(iterable, key, reverse)Sort a Dictionary by ValueExample 1: Basic Sorting in PythonExample 2 : Sorting different Data Types in PythonExample 3: Sort…
View Post
Convert A List To String In Python

Convert a list to string in Python

Table of Contents Hide Program to convert a list to string in PythonUsing join() methodUsing List ComprehensionIterating using for loopUsing map() method There are various scenarios where you would need…
View Post