Bootstrap Row Causes Horizontal Scrollbar

March 31, 2024 Post a Comment

I have a problem: I want to create a chatwebapp and use Bootstrap for the layout. Unfortunatelly with the following code i get a horizonatl scrollbar that shouldnt be there. I use

Solution 1:

You were so close! You only need to add class="container" to the 1st div. Using this method keeps you using the Bootstrap-provided method for this situation.

<!DOCTYPE html><htmllang="en"><head><title>Bootstrap Example</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script></head><body><divclass="container"><!-- added class="container" here --><divclass="row"><divclass="col-md-12"><div><navclass="navbar navbar-expand-lg navbar-light bg-light"><aclass="navbar-brand"href="#">
                        Navbar w/ text
              </a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarText"aria-controls="navbarText"aria-expanded="false"aria-label="Toggle navigation"
                    ><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarText"><ulclass="navbar-nav mr-auto"><liclass="nav-item active"><aclass="nav-link"href="#">
                                    Home <spanclass="sr-only">(current)</span></a></li><liclass="nav-item"><aclass="nav-link"href="#">
                                    Features
                    </a></li><liclass="nav-item"><aclass="nav-link"href="#">
                                    Pricing
                    </a></li></ul><spanclass="navbar-text">Navbar text with an inline element</span></div></nav></div><divclass="container-fluid"><divclass="row"><divclass="col-md-4 bg-success"><div><divclass="row m-1"><divclass="col-md-11">
                        Chats
                          </div><divclass="col-md-1"><iclass="fas fa-plus-circle"></i></div></div><divclass="row mb-2"><divclass="col-md-12"><formclass="form-inline"style={{height: "0%", width: "100%", paddingLeft: "0", paddingRight: "0", paddingTop: "8px" }}><inputclass="form-control  mr-sm-1"style={{width: "80%" }} type="search"placeholder="Suchen"aria-label="Search" /><buttonclass="btn btn-outline-success my-2 my-sm-0"type="submit">Suchen</button></form></div></div><divclass="row"><divclass="col-md-12"><divclass="list-group"><div><ahref="#"class="list-group-item list-group-item-action flex-column align-items-start"><divclass="d-flex w-100 justify-content-between"><h5class="mb-1">List group item heading</h5><small>3 days ago</small></div><divclass="row"><divclass="col-md-11">Donec id elit non mi porta...
                        </div><divclass="col-md-1"><spanclass="badge badge-primary badge-pill text-right">5</span></div></div></a></div></div></div></div></div></div><divclass="col-md-8 bg-primary"><div><divclass="row "><divclass="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 "><divclass="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"><divclass="row"><divclass="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"><imgclass="image-head-chat"alt="Responsive image" /></div><divclass="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
                                    Text
                                </div><divclass="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                                    Icons
                                </div></div></div><divclass="row"><divclass="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                Nachrichten
                            </div></div><divclass="row"><divclass="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                Eingabe
                                <divclass="row">
                                       Form
                                </div></div></div></div></div></div></div></div></div></div></div></div>

Solution 2:

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

<!DOCTYPE html><htmllang="en"><head><title>Bootstrap Example</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script></head><body><div><divclass="row m-auto"><divclass="col-md-12 p-0"><div><navclass="navbar navbar-expand-lg navbar-light bg-light"><aclass="navbar-brand"href="#">
                        Navbar w/ text
              </a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarText"aria-controls="navbarText"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarText"><ulclass="navbar-nav mr-auto"><liclass="nav-item active"><aclass="nav-link"href="#">
                                    Home <spanclass="sr-only">(current)</span></a></li><liclass="nav-item"><aclass="nav-link"href="#">
                                    Features
                    </a></li><liclass="nav-item"><aclass="nav-link"href="#">
                                    Pricing
                    </a></li></ul><spanclass="navbar-text">Navbar text with an inline element</span></div></nav></div><divclass="container-fluid"><divclass="row"><divclass="col-md-4 bg-success"><div><divclass="row m-1"><divclass="col-md-11">
                    Chats
                  </div><divclass="col-md-1"><iclass="fas fa-plus-circle"></i></div></div><divclass="row mb-2"><divclass="col-md-12"><formclass="form-inline"style={{height: "0%", width: "100%", paddingLeft: "0", paddingRight: "0", paddingTop: "8px" }}><inputclass="form-control  mr-sm-1"style={{width: "80%" }} type="search"placeholder="Suchen"aria-label="Search" /><buttonclass="btn btn-outline-success my-2 my-sm-0"type="submit">Suchen</button></form></div></div><divclass="row"><divclass="col-md-12"><divclass="list-group"><div><ahref="#"class="list-group-item list-group-item-action flex-column align-items-start"><divclass="d-flex w-100 justify-content-between"><h5class="mb-1">List group item heading</h5><small>3 days ago</small></div><divclass="row"><divclass="col-md-11">Donec id elit non mi porta...
                            </div><divclass="col-md-1"><spanclass="badge badge-primary badge-pill text-right">5</span></div></div></a></div></div></div></div></div></div><divclass="col-md-8 bg-primary"><div><divclass="row "><divclass="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 "><divclass="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"><divclass="row"><divclass="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"><imgclass="image-head-chat"alt="Responsive image" /></div><divclass="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
                          Text
                        </div><divclass="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                          Icons
                        </div></div></div><divclass="row"><divclass="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                        Nachrichten
                      </div></div><divclass="row"><divclass="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                        Eingabe
                        <divclass="row">
                          Form
                        </div></div></div></div></div></div></div></div></div></div></div></div>

Html5 Library

Bootstrap Row Causes Horizontal Scrollbar

Solution 1:

Solution 2:

Post a Comment for "Bootstrap Row Causes Horizontal Scrollbar"