Remove padding between div in twitter bootstrap - html

Question

I'm new to bootstrap 3. I want to divide a row into 8-column and 4-column, also add the background for the row
<div class="row" >
<div class="col-sm-8">
<div class="abc" style="background:blue">a</div>
</div>
<div class="col-sm-4">
<div class="abc" style="background:blue; border:1px solid red">b</div>
</div>
</div>
but I dont know why there is a blank space between two column. So, how can I remove the blank. Below is a image for more detail.
ps: sorry for my bad english

Answer 1

View Live Bootply
CSS
.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
padding-right:0;
padding-left:0;
}
.row.no-gutter {
margin-left: 0;
margin-right: 0;
}
HTML
<div class="row no-gutter">
<div class="col-lg-8"><div>one</div></div>
<div class="col-lg-4"><div>two</div></div>
</div>
Snap

Answer 2

use this
HTML
<div class="row" >
<div class="col-sm-8 paddin0 margin0">
<div class="abc" style="background:blue">a</div>
</div>
<div class="col-sm-4 paddin0 margin0">
<div class="abc" style="background:blue; border:1px solid red">b</div>
</div>
</div>
CSS
.paddin0 {
padding:0px !important
}
.margin0{
margin:0px; !important
}

Answer 3

I´m not bootstrap guru, what about adding blue background to parent .row instead of two children divs?
<div class="row" style="background:blue">
<div class="col-sm-8">
<div class="abc">a</div>
</div>
<div class="col-sm-4">
<div class="abc" border:1px solid red">b</div>
</div>
</div>

Answer 4

you can just use minus margin on that red lined div like margin-left:-30px , see demo here :
http://www.bootply.com/DDhnkOqeID
Cheers !

Answer 5

Just add this to your css file
.nopadding {
padding-left: 0px;
padding-right: 0px;
}
also, add that class to your column div's
having a new html code:
<div class="row" >
<div class="col-sm-8 nopadding">
<div class="abc" style="background:blue">a</div>
</div>
<div class="col-sm-4 nopadding">
<div class="abc" style="background:blue; border:1px solid red">b</div>
</div>
</div>
that will remove the padding.
Why I added a new css class?
Because you might need the default css structure of the boostrap, keeping them is a good idea and also the nopadding class can be used also to other div that you want to removed their padding.
Hope it helps.