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

Lobo

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.

Geneticist

In this case your content is going to stick to the window borders. – Estafette

Bootstrap 4, which was released long after this useful answer, now has utility classes for this. You basically add p-0 to the conainer. I've posted an answer explaining the details: https://mcmap.net/q/463210/-bootstrap-fluid-layout-with-no-external-margin – Dettmer

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.

Dettmer

If you do this you'll end up with a horizontal scroll bar due to 15px of blank space to the right of the screen. You're ignoring the negative margins on the row class, which is why the padding is there on the container. You could fix by also adding the m-0 class to every top-level row (it wouldn't be needed on any rows within rows). – Brisket

@CraigBrown this comment greater than answers. <div class="container-fluid p-0"> <div class="row m-0"> <div class="row"> – Zwinglian

p-0 do the trick. This is a best answer since you don't touch the .css but use bootstrap elements. – Mahout