Using Container-Fluid Within Bootstrap Cause Horizontal Scrollbar

using container-fluid within bootstrap cause horizontal scrollbar

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
Demo with New Style Sheet in Fiddle
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

Bootstrap columns cause horizontal scrollbar

Horizontal scrollbars are usually caused by using the Bootstrap grid incorrectly.

The solution proposed by Ben Goossens is a hack and should be avoided because it makes the use of Bootstrap pointless. Use Bootstrap as intended and you won't need any hacks or custom css gymnastics.

Here's what you need:

1) .container div

2) .row div

3) .col div

That's the "holy trinity" you need in order for the Bootstrap grid to work properly.

Always put all of your normal content into Bootstrap columns (which in turn go into a row, which goes into a container) and you won't have any horizontal scrollbar issues.

The Bootstrap rows are designed to work with columns together. If you leave one of those 2 out, you're gonna run into issues.

Problem: horizontal scrollbar appears when I add an image to a column using bootstrap 4 grid system

The root cause of the problem is due to no restriction on 'width' being applied to the image.
The image is very big and hence, it is causing the horizontal scroll bar to appear.

Bootstrap provides a class called 'img-fluid' to resolve this common issue.

The horizontal scroll bar can be avoided by specifying the image class of 'img-fluid', as shown below.

The second problem with the use of container-fluid px-0 can be fixed by specifying the px-lg-5 class instead of px-0.
(px-lg-5 works well for wide sections / outer-most divs)

Working example with 'img-fluid' and container-fluid px-lg-5 classes:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
          crossorigin="anonymous">
    <title>Bootstrap - responsive image</title>
  </head>
  <body>
    <div class="container-fluid px-lg-5">
      <div class="row">
          <div class="col-6">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </div>
          <div class="col-6">
              <img class="img-fluid" 
                   src="https://images.unsplash.com/photo-1585600270404-543d0eac85e1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3042&q=80">
          </div>
      </div>
  </body>
</html>

Output:

Sample Image

More information:
https://getbootstrap.com/docs/4.0/content/images/

Bootstrap row causes horizontal scrollbar

Set the margin of the row to auto by adding the class m-auto.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

<body>

  <div>
    <div class="row m-auto">
      <div class="col-md-12 p-0">
        <div>
          <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">
                        Navbar w/ text
              </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
            <div class="collapse navbar-collapse" id="navbarText">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">
                                    Home <span class="sr-only">(current)</span>
                                </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">
                                    Features
                    </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">
                                    Pricing
                    </a>
                </li>
              </ul>
              <span class="navbar-text">Navbar text with an inline element</span>
            </div>
          </nav>
        </div>
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-4 bg-success">
              <div>
                <div class="row m-1">
                  <div class="col-md-11">
                    Chats
                  </div>
                  <div class="col-md-1">
                    <i class="fas fa-plus-circle"></i>
                  </div>
                </div>
                <div class="row mb-2">
                  <div class="col-md-12">
                    <form class="form-inline" style={{ height: "0%", width: "100%", paddingLeft: "0", paddingRight: "0", paddingTop: "8px" }}>
                      <input class="form-control  mr-sm-1" style={{ width: "80%" }} type="search" placeholder="Suchen" aria-label="Search" />
                      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
                    </form>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12">
                    <div class="list-group">
                      <div>
                        <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
                          <div class="d-flex w-100 justify-content-between">
                            <h5 class="mb-1">List group item heading</h5>
                            <small>3 days ago</small>
                          </div>
                          <div class="row">
                            <div class="col-md-11">Donec id elit non mi porta...
                            </div>
                            <div class="col-md-1">
                              <span class="badge badge-primary badge-pill text-right">5</span>
                            </div>
                          </div>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-8 bg-primary">
              <div>
                <div class="row ">
                  <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 ">

                    <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                      <div class="row">
                        <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                          <img class="image-head-chat" alt="Responsive image" />
                        </div>

                        <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
                          Text
                        </div>

                        <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                          Icons
                        </div>

                      </div>
                    </div>

                    <div class="row">
                      <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                        Nachrichten
                      </div>
                    </div>

                    <div class="row">
                      <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                        Eingabe
                        <div class="row">
                          Form
                        </div>
                      </div>
                    </div>

                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Bootstrap container-fluid vertical scrolling

I found it. My main css-file was causing this problem since I had this:

 body{
  font-family: Arial, Verdana, sans-serif !important;
  font-size: 9pt !important;
  height: 100vh;
  width: 100vw;
}

Where the width: 100vw caused the problem.

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

Using Container-Fluid Within Bootstrap Cause Horizontal Scrollbar