CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Michael Brenndoerfer
Michael Brenndoerfer

Reputation: 4066

Container-Fluid has little padding on each side of the cols

I want a fluid container which goes over 100% of my screen. The problem is, that bootstraps ads a padding to each col so that the total width is bigger than 100%. Adding a "no-padding" class to every col maybe works but can't be the correct solution, or?

The strange thing is, that it works in my jsFiddle correctly. In my project not:

jsFiddle

In my project: 

<div id="section1">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-2">test</div>
            <div class="col-lg-2">test</div>
            <div class="col-lg-2">test</div>
            <div class="col-lg-2">test</div>
            <div class="col-lg-2">test</div>
            <div class="col-lg-2">test</div>
        </div>
    </div>
</div>

#section1 {
    max-width: 100%;
}

It looks like this: enter image description here

Upvotes: 0

Views: 108

Answers (1)

DavidG
DavidG

Reputation: 118937

Just add a zero padding to container-fluid:

.container-fluid {
    padding-left: 0;
    padding-right: 0;
}

Like this:

http://jsfiddle.net/5xWp5/3/

Note I also applied it to the right side as I assume you want it there too.

Upvotes: 3

Related Questions