How to Make Bootstrap 3 Fluid Layout Without Horizontal Scrollbar

How to make bootstrap 3 fluid layout without horizontal scrollbar

This was introduced in v3.1.0: http://getbootstrap.com/css/#grid-example-fluid

Commit #62736046 added ".container-fluid variation for full-width containers and layouts".

Bootstrap 3.2 full-width layout without horizontal scrolling issue

DEMO: http://jsbin.com/hajey/1/edit

http://jsbin.com/hajey/1

I would make a special class for the container and target like that so you don't affect other columns, this is w/o special class.

.content {
    background-color: #000000;
    height: 200px;
}

.col-xs-12 { padding: 0px }

.container-fluid { padding: 0 }

.container-fluid .row { margin: 0 }

.row .col-md-6 { padding: 0 }

@media (min-width:992px) { 
    .row .col-md-6:first-child { padding-right: 15px }

    .row .col-md-6:last-child { padding-left: 15px }
}

bootstrap row 100% width without horizontal scroll and adaptive on each size

You can use this:

    @media (min-width: 768px)
      .container {
         max-width: 100%;
    }

This will overwrite the original max-width that is now in play. Just to be sure, you can put there the same css code without the media query, so it will work on all screen resolutions.

How to remove this horizontal scrollbar in Bootstrap 3

As per Bootstrap 3 documentation:

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

Therefore, add the class container to your .wrapper element.

Updated Example

<div class="wrapper container">
    <div class="row">
        ...
    </div>
</div>

As for an explanation, the .row class has -15px margins on each side.

.row {
    margin-right: -15px;
    margin-left: -15px;
}

The .container class effectively displaces that with the following:

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

In addition to reading the Bootstrap 3 docs, I'd suggest reading the article "The Subtle Magic Behind Why the Bootstrap 3 Grid Works".

Bootstrap 3.3.7 row causing horizontal scroll bar

First of all you don't need row or col-*12 classes if your section is 100% wide look at this bootstrap example they have not taken any row or col-*12 neither with header nor jumbotron. If your section has column Just take row inside col-* classes for example

<div class="col-sm-6">
    <div class="row">stuff</div>
</div>
<div class="col-sm-6">
    <div class="row">stuff</div>
</div>

Fiddle

Or in case if you are using container-fluid

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6">
            <div class="row">stuff</div>
        </div>
        <div class="col-sm-6">
            <div class="row">stuff</div>
        </div>
    </div>
</div>

Fiddle

How to remove horizontal scrollbar when using no padding

Probably you've implemented your grid incorrectly. Avoid to add additional styles to bootstrap classes and use .row when needed. When you need custom styles use wrappers inside .container, .row and .col so you can manage them without altering bootstrap behavior.

In your case, I would remove the class row from the parent div of p-0, then remove the class col-md-12 from p-0, setting the p-0 width to 100% and removing the properties padding:0px. Anyway, I think you've additional issues in your nested elements so good lectures for you are:

• How the Bootstrap 4 Grid Works
• How Box model works

Bootstrap 3 fluid layout with sidebar prevents vertical scroll

Got it working with Skelly's help!

<div id="page-content-wrapper">
    <div class="page-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-4" id="right">
                        <div class="panel panel-default ">
                            <div class="panel-heading">
                                <h3 class="panel-title">Shortcuts</h3>
                            </div>
                            <!--User details -->
                            <div class="panel-body">
                                <li><a href="#/milestones">Milestones --»</a></li>
                                <li><a href="#/appversions">Versions --»</a></li>
                                <li><a href="#/reportcsv">CSV Report --»</a></li>
                            </div>
                        </div>
                </div>
                <div class="col-sm-8" id="left">
                    <!--All apps -->
                    <div class="panel panel-default" ng-init="">
                        <!-- Default panel contents -->
                        <div class="panel-heading clearfix">
                            <b>Your Applications</b>
                         </div>
                        <div class="panel-body">
                            <table-here></table-here>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

---

Related Topics