Bootstrap Custom Gutter Spacing

by Faisal Khan Janjua

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row-7">
      <p>My Row </p>
    <div class="col-xs-6">
      <p>My Column </p>
    </div>
    <div class="col-xs-6">
      <p>My Column </p>
    </div>
  </div>
  
  <br>
  <span class="clearfix"></span>
  <br>
  
  <div class="row">
      <p>Boot Row </p>
    <div class="col-xs-6">
      <p>Boot Column </p>
    </div>
    <div class="col-xs-6">
      <p>Boot Column </p>
    </div>
  </div>
</div>

CSS

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
div{
  min-height:30px;
  border:1px solid #9F9;
}
.row-7{
	margin-left: -7px;
	margin-right: -7px; 
}
.row-7:before,
.row-7:after{
  display: table;
  content: " ";
}
.row-7:after{
  clear:both;
}
.row-7 .col-xs-1, .row-7 .col-xs-2, .row-7 .col-xs-3, .row-7 .col-xs-4, .row-7 .col-xs-5, .row-7 .col-xs-6, .row-7 .col-xs-7, .row-7 .col-xs-8, .row-7 .col-xs-9, .row-7 .col-xs-10, .row-7 .col-xs-11, .row-7 .col-xs-12,
.row-7 .col-sm-1, .row-7 .col-sm-2, .row-7 .col-sm-3, .row-7 .col-sm-4, .row-7 .col-sm-5, .row-7 .col-sm-6, .row-7 .col-sm-7, .row-7 .col-sm-8, .row-7 .col-sm-9, .row-7 .col-sm-10, .row-7 .col-sm-11, .row-7 .col-sm-12,
.row-7 .col-md-1, .row-7 .col-md-2, .row-7 .col-md-3, .row-7 .col-md-4, .row-7 .col-md-5, .row-7 .col-md-6, .row-7 .col-md-7, .row-7 .col-md-8, .row-7 .col-md-9, .row-7 .col-md-10, .row-7 .col-md-11, .row-7 .col-md-12,
.row-7 .col-lg-1, .row-7 .col-lg-2, .row-7 .col-lg-3, .row-7 .col-lg-4, .row-7 .col-lg-5, .row-7 .col-lg-6, .row-7 .col-lg-7, .row-7 .col-lg-8, .row-7 .col-lg-9, .row-7 .col-lg-10, .row-7 .col-lg-11, .row-7 .col-lg-12 {
	padding-left: 7px;
	padding-right: 7px;
}