CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Shin622
Shin622

Reputation: 645

Remove padding between div in twitter bootstrap

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.Your picture

ps: sorry for my bad english

Upvotes: 1

Views: 3512

Answers (5)

Nimitz E.
Nimitz E.

Reputation: 95

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.

Upvotes: 0

Jaykumar Patel
Jaykumar Patel

Reputation: 27614

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

enter image description here

Upvotes: 4

Den Pat
Den Pat

Reputation: 1254

you can just use minus margin on that red lined div like margin-left:-30px , see demo here :

http://www.bootply.com/DDhnkOqeID

Cheers !

Upvotes: 0

pavel
pavel

Reputation: 27082

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>

Upvotes: 0

Harutyun Abgaryan
Harutyun Abgaryan

Reputation: 2023

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
}

Upvotes: 0

Related Questions