bootstrap-horizon remove space between columns

Question

I'm doing a animated carrousel/ slider with bootstrap-horizon, but I can't seem to get rid of the space between columns. I tried the no gutter css but with no luck.

Marked as red for testing.

html

<div class="container">
  <div class="row row-horizon">
    <div class="col-xs-6">
      <p>This content is very, very, very, very, very, very, very wide!</p>
    </div>
    <div class="col-xs-6">
      <p>This content is very, very, very, very, very, very, very wide!</p>
    </div>
    <div class="col-xs-6">
      <p>This content is very, very, very, very, very, very, very wide!</p>
    </div>
  </div>
</div>

css

.row-horizon{background-color:red;}
.col-xs-6{background-color:white; height:40px;}

result result image

please see JSfiddle - https://jsfiddle.net/pbarros/8wfh8o3e/3/

Thank you

http://stackoverflow.com/questions/16489307/how-to-remove-gutter-space-for-a-specific-div-only-bootstrap/21282059#21282059 — j08691, Jun 13 '16 at 21:05

score 0 · Accepted Answer · answered Jun 14 '16 at 12:51

Every col-*-* class inside .row-horizon has a display value of 'inline-block'. By default, browsers add some space between 'inline-block' elements, which are caused by line-breaks in your html. The easiest way to get rid of it is by removing the line-breaks from your html.

So instead of:

<div>section 1</div>
<div>section 2</div>
<div>section 3</div>

Do:

<div>section 1</div><div>section 2</div><div>section 3</div>

Your html wont look pretty, but it does solve the issue. Check out this fiddle: https://jsfiddle.net/wietsedevries/8wfh8o3e/5/

bootstrap-horizon remove space between columns

1 Answers1