Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

using container-fluid within bootstrap cause horizontal scrollbar

Here is a simple example:

<div class="container-fluid">     <div class="row">         <div class="col-lg-12">DUMMY CONTENT</div>     </div> </div> 

Demo in Fiddle

When I see the result in browser I get a horizontal scrollbar.

Why is this happening?

What am I doing wrong?

like image 415
agis Avatar asked May 20 '14 19:05

agis


People also ask

What causes horizontal scrollbar?

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.

What does container-fluid do in Bootstrap?

The . container-fluid class provides a full width container, spanning the entire width of the viewport.

Can you have a container inside a container Bootstrap?

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: .


2 Answers

container-fluid was originally taken out of Bootstrap 3.0, but added back in 3.1.1

To fix this, you can either:

  1. Use the newer version of Bootstrap style sheet

    Demo with New Style Sheet in Fiddle

  2. 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; } 

    Demo with Custom container class in Fiddle

like image 125
KyleMit Avatar answered Sep 18 '22 22:09

KyleMit


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

like image 33
lvarayut Avatar answered Sep 17 '22 22:09

lvarayut