container-fluid leaving blank space - html

Question

I want to use a full width div, so added container-fluid class which leaves blank space on left and right. I solved it using negative margin left and right. But the problem is the negative margin afftects bootstrap responsive nature. When I resize the left side contents are hidden and there is a horizontal scrollbar on resizing.
<div class="container-fluid">
<div class="row" style="background-color:gainsboro">
<div class="col-md-10">
</div>
</div>
</div>

Answer 1

All I did in this scenario is apply the following styling and no padding or horizontal scrollbars, works on small devices too.
.container-fluid{
padding-left: 0rem;
padding-right: 0rem;
overflow: hidden;
}

Answer 2

The problem you're having with the padding is the result of the classes you are calling. Both the col-md series and container-fluid come out of the box with
padding-left: 15px;
padding-right: 15px;
For a padding of 30px on each side combined. The simplest way to fix your content being clipped is by creating your own class to include
.container-margin {
margin-left: -15px;
margin-right: -15px;
}
The row class with take care of -15px, and the above will take care of the rest. This way if you ever chose to use container-fluid again, you wouldn't get the same result for all of them.
Here is a fiddle with your code updated.

Answer 3

add overflow:hidden to your container.

Answer 4

You can use Bootstrap utilities class m-0 to remove unwanted margins.
<div class="container-fluid m-0">
<div class="row" style="background-color:gainsboro">
<div class="col-md-10">
</div>
</div>
</div>

Answer 5

Another way to mimic http://www.ichangemycity.com/about-us and using Bootstraps "content centered" layout.
JSFiddle here: https://jsfiddle.net/osserpse/9L3g1ezw/4/
Keep .container to make the text content to center on the view
Add a new class, my-full-widthto <div class="col-md-10 my-full-width> where you want the background to span full width. As far as I know it's not possible to change/add Bootstraps .rowor .col-* classes and retain control over their width and responsive behavior AND to create a background on full width of the viewport. (Side note: it's a best practice to scope custom classes in Bootstrap projects so is super simple to spot which classes are Bootstrap native and which are project specific; in my example I use .my-*
CSS:
.my-full-width::after {
content: "";
background-color: aliceblue;
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
right: -100%;
left: -100%;
z-index: 0
}
// Add elements and classes here
h1, p {
position: relative;
z-index: 1; //to make elements to render above the background
}