Here is a simple example:
<div class="container-fluid"> <div class="row"> <div class="col-lg-12">DUMMY CONTENT</div> </div> </div>
When I see the result in browser I get a horizontal scrollbar.
Why is this happening?
What am I doing wrong?
Web browsers do not take into account the width of the scrollbar on the side of a page when computing width values, so since we have a page that is longer than a single viewport, part of our page is being rendered behind the vertical scroll bar, causing the browser to display a horizontal scroll bar.
The . container-fluid class provides a full width container, spanning the entire width of the viewport.
Containers are used to contain, pad, and (sometimes) center the content within them. While containers can be nested, most layouts do not require a nested container. Bootstrap comes with three different containers: .
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
Or add in the class yourself
The .row
adds a 15px
margin to the left and right. Since .container-fluid
fills up 100%
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; }
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With