Bootstrap: fluid layout with no external margin

Question

if i have:

<div class="container-fluid">
   <div class="row-fluid">
      <div class="span8">
             Some Element....
       </div>
       <div class="span4">
             Other Element
       </div>   
   </div>       
</div>

With this code i have some margin from left and right window borders. How can eliminate these margins?

Thanks for your support

Answer 1

If i understand your question correctly, I believe you want this:

.container-fluid {
    padding: 0px;
}

Also if you are using responsive bootstrap you will also want this:

@media (max-width: 797px) {
    body { 
        padding-left: 0px;
        padding-right: 0px;
    }
}

Edit: here is a js fiddle.

Answer 2

The effect you are seeing is because of the container’s padding.

You can change the container’s default padding with the built-in Bootstrap 4 spacing utility classes.

To remove the padding, add p-0 to the container:

<div class="container-fluid p-0">
    <div class="row">
      <div class="col-8">
         Some Element....
       </div>
       <div class="col-4">
          Other Element
       </div>   
    </div>       
</div>

Using the built-in utility classes has the benefit of keeping your CSS lean and it also does not modify the default container-fluid class definition.