twigg twigg - 6 months ago 16
CSS Question

Bootstrap 3 adding gutters to the grid system

I'm obviously missing something very obvious here but I want a 10px gutter between the bootstrap columns. Coming from ui-kit which has gutters by default, to turn them off you simple add the class uk-grid-collapse.

What is the bootstrap equivalent for turning gutters on?

http://codepen.io/anon/pen/vKBjBa

<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col1">
<div class="div-content">col 1</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col2">
<div class="div-content">col 2</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col3">
<div class="div-content">col 3</div>
</div>
</div>

Answer

Just define the colors to inner div. Here i have remove classes from parents and passed the classes to child div's

<div class="row">
  <div class="col-lg-4 col-md-4 col-sm-12">
    <div class="div-content col1">col 1</div>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-6">
    <div class="div-content col2">col 2</div>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-6">
    <div class="div-content col3">col 3</div>
  </div>
</div>

Because bootstrap has a default gutter space in col- classes so use them and define background-color to inner div's.

The default gutter space is 15px from each side left and right so you will see the default space of 30px between the div's. If you want to change that space to 10px just write you own css with desired space and overwrite it.

Comments