agis agis - 1 year ago 117
CSS Question

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>

Demo in Fiddle

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

Why is this happening?

What am I doing wrong?

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download