CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3grid
ilyo
ilyo

Reputation: 36411

Bootstrap grid with even vertical and horizontal spaces

When using the bootstrap grid, the vertical spaces and the most left & right are 15px but the spaces between the columns are double: 30px.

Is there a way to make them also 15px without changing Bootstrap CSS?

enter image description here

Upvotes: 1

Views: 2482

Answers (1)

Christina
Christina

Reputation: 34652

It's very easy to change the gutter without affecting the core bootstrap.css and still be able to use the same classes to push pull and offset.

Just make sure your .row around the new gutters has negative left and right margin equal to the padding on the left and right of the columns. Just like all floated elements this grid, like the Bootstrap grid, is exactly the same and will still require no more than 12 columns per row, if exceeded all heights need to be equal or you will need to clear them or use some other means such as jQuery or making them all the same height.

There is no vertical spacing on the grid, any vertical spacing comes from the children inside the column and it's usually the bottom margin value.

https://jsbin.com/wonuni/1/

enter image description here

CSS

.row.grid-15-gutter {
    margin-left: -7.5px;
    margin-right: -7.5px;
}
.row.grid-15-gutter [class*="col-"] {
    padding-left: 7.5px;
    padding-right: 7.5px;
}
.panel {
    border: 1px solid red;
    padding: 10px;
    margin-bottom: 15px;
}

HTML

<div class="container">
  
    <h2>Modified Grid</h2>
  
   <div class="row grid-15-gutter">
      <div class="col-sm-5">
         <div class="panel">1</div>
      </div>
      <div class="col-sm-7">
         <div class="panel">2</div>
      </div>
   </div>
   <div class="row grid-15-gutter">
      <div class="col-sm-5">
         <div class="panel">1</div>
      </div>
      <div class="col-sm-7">
         <div class="panel">3</div>
      </div>
   </div>
  
  <hr>
  
    
  <h2>Regular Grid</h2>
  
  
   <div class="row">
      <div class="col-sm-5">
         <div class="panel">1</div>
      </div>
      <div class="col-sm-7">
         <div class="panel">2</div>
      </div>
   </div>
   <div class="row">
      <div class="col-sm-5">
         <div class="panel">1</div>
      </div>
      <div class="col-sm-7">
         <div class="panel">3</div>
      </div>
   </div>
  
  
</div>

Upvotes: 2

Related Questions