using container-fluid within bootstrap cause horizontal scrollbar
.row{
margin: 0px;
}
quick easy fix this is all you need
container-fluid
was originally taken out of Bootstrap 3.0, but added back in 3.1.1
To fix this, you can either:
Use the newer version of Bootstrap style sheet
Demo with New Style Sheet in Fiddle
Or add in the class yourself
The
.row
adds a15px
margin to the left and right. Since.container-fluid
fills up100%
of the screen width, the extra margin space causes overflow issues.To fix this, you need to add padding to
.container-fluid
class.container-fluid { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
Demo with Custom container class in Fiddle
In my case this fix worked well:
.row {
margin-left: 0;
margin-right: 0;
}
I also faced this problem. I don't know the cause of the problem. It maybe a bug from Twitter Bootstrap
. Now, I have to manually add the overflow-x:hidden
to my body
tag:
body {
overflow-x: hidden;
}
Jsfiddle