How to remove this horizontal scrollbar in Bootstrap 3

Question

I\'ve got this irritating horizontal scroll on my bootstrap page. Can\'t figure out what is making it behave like this or what to do about it?

JsFiddle link: http:/

Answer 1

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

Answer 2

Copy and paste this in CSS code

   html, body {
     overflow-x: hidden;
   }

Answer 3

In my case, I had one container-fluid class div tag in another container-fluid class div tag. Removing one of them fixed the issue.

Answer 4

Just copy this code to your CSS, it will disable your horizontal scroll bar.

body {overflow-x: hidden;}

Answer 5

The issue is basically caused due to the parent .container is missing. The solution is that you can add a .no-container class to the row and add margin: 0 to compensate the negative margin of the row class.

See the below CSS and HTML markup code:

.no-container {
    margin-left: 0 !important;
    margin-right: 0 !important; 
}
.row {
    border: 1px solid #999;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!--<div class="container"> Container is commented -->
<div class="row no-container">
    <div class="col-md-6 col-xs-6 col-sm-6">column-6</div>
    <div class="col-md-6 col-xs-6 col-sm-6">column-6</div>
</div>
<!--</div> Container ends here -->

Answer 6

Try this! It works for me.

.col-12{
    padding-right: 0!important;
    padding-left: 0!important;
}

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