-3

I'm using bootstraps gird and I get the gap b/w the columns:

p {
  height: 400px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <p>Huge text</p>
    </div>
    <div class="col-md-6">
      <p>Huge text</p>
    </div>
  </div>
</div>
Vucko
  • 20,555
  • 10
  • 56
  • 107
Shaik Shamsher
  • 20
  • 4
  • 1
    This is happening because columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows. – Abhishek Pandey Jan 25 '17 at 10:35
  • 1
    Please do a bit research before posting a question on SO. Check this [Question](http://stackoverflow.com/questions/19562903/remove-padding-from-columns-in-bootstrap-3) – Mohammad Usman Jan 25 '17 at 10:35
  • 1
    each column `col` has a 15px paddings on right and left. – Mohammad Jan 25 '17 at 10:37

1 Answers1

0

This gutter is standard Bootstrap behaviour. An interesting and very useful snippet to override it is this:

.row.no-gutter > [class*='col-'] {
   padding-right:0;
   padding-left:0;
}

Used with:

<div class="row no-gutter">
mayersdesign
  • 5,062
  • 4
  • 35
  • 47