0

I have a problem: I want to create a layout but a horizontal scrollbar appears as soon as i remove the padding at the following line of codes (p-0). Is there a chance that i can remove the padding and no scrollbar to appear? I dont know what to do, maybe you guys can help me. The problem is I want to have the col the full length without padding, but when I remove the padding the horizontal scrollbar appears.

...

<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 p-0">    
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success p-0">
...


<!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">
                        <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" style={{marginTop: "7.5px", marginBottom: "7.5px"}}>
                <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 ">
                  <div>
            <div class="row">
                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 p-0">

                    <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success p-0">
                        <div class="row">
                        <!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
                            <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                                <img src="..." 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>

</body>
</html>
Kazim
  • 175
  • 9

3 Answers3

1

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:

Francesco Lisandro
  • 700
  • 4
  • 14
1

Just like your earlier question (with an ill-advised accepted answer to use m-auto), the actual problem is the grid isn't properly structured.

The grid must be container > row > col-*s > row > col-*s, etc...

Simple answer:

"How to remove horizontal scrollbar when using no padding"

Follow the correct grid structure...

<div class="container-fluid">
    <div class="row">
        <div class="col-12 bg-info p-0">
            no padding
        </div>
    </div>
</div>

and, follow the correct grid structure when nesting columns...

<div class="container-fluid">
    <div class="row">
        <div class="col-12 p-0">
             <div class="row">
                <div class="col-12 bg-info p-0">
                no padding
                </div>
             </div>
        </div>
    </div>
</div>

Then there will not be a horizontal scrollbar!

Demo

Complete answer (TL;DR)

Read the Bootstrap docs...

"Containers are the most basic layout element in Bootstrap and are required when using our default grid system. "

"Rows are wrappers for columns.... In a grid layout, content must be placed within columns and only columns may be immediate children of rows."

  • 1 - The grid requires a container -- choose container-fluid for full width
  • 2 - Columns and only columns are the immediate children of .row, not other columns. Read about nesting.
  • 3 - Rows are only used to wrap columns. Content should not be placed directly in the .row.

Comparing your code to the grid structure "rules"...

One problem is here....

<div class="col-md-8 ">
    <div>
        <div class="row">
            <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 p-0">
                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success p-0">
                    <div class="row">
                        <!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

You have a col-12 nested immediately in another col-12 which won't work. The correct structure is...

<div class="col-md-8">
    <div class="row">
        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 p-0">
            <div class="row">
                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success p-0">
                    content here
                </div>
            </div>
        </div>
    </div>
</div>

Secondly, the columns and rows are being overused. There's no reason to have 12-unit columns inside more rows with 12-unit columns. There's also no reason to use the same size at every breakpoint...

col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12

is the same as:

col-12

Finally, there should only be one outer container fluid, not containers nested inside containers. There is a special no-gutters class if you want to remove the spacing around or between columns, which is the correct method of removing the gutters (padding) on an entire row.

The entire markup can be greatly simplified by just following the correct grid stucture. You'll save a lot of time by simply understanding how the grid works...

container > row > (columns with content) > row > (columns with content), etc...

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
0

In the div class=row with col-md-8, delete the margin-right and left with -15px;

angélique copéré
  • 56
  • 3