Bootstrap Columns Overlapping

I have an issue with bootstrap's grid layout. My columns are overlapping one another when I resize the screen to a smaller layout. I'm not sure what the issue is. Here is a picture

Solution 1:

According to Bootstrap Docs, for each .row you need to have a .col-*-* as direct child but you don't have it in a few of them. Which cause the overflow.

Plus don't use the html tag width, it is deprecated. use class="img-responsive" from bootstrap to achieve max-width:100%

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"  /><divclass='container-fluid'><divclass="row"><!-- 1 --><divclass="col-sm-5 col-md-4"><h1>JOHN SMITH</h1></div></div><divclass='row'><!-- 2 --><divclass="col-sm-5 col-md-4"><h2>VULCAN FLATBED</h2></div></div><divclass="row"><!-- 3 --><divclass="col-sm-4 col-md-4 col-lg-4"style="background-color:yellow;"><divclass='row'><divclass="col-xs-12"><imgclass="img-responsive"src="//lorempixel.com/500/200"alt="vehicle image" /></div></div><divclass='row'><divclass="col-xs-12"><buttontype='submit'><imgsrc="book_now_button@2x.png"alt="book now"></button></div></div></div><divclass="col-sm-8 col-md-8 col-lg-8"style="background-color:pink;"><!-- RIGHT SIDE --><divclass='row'><divclass="col-xs-12"><h3>CAN HELP WITH</h3><p>LIFTING & YARD WORK</p></div></div><divclass='row'><divclass="col-xs-12"><h3>AVAILABLE</h3><p>ALL WEEKENDS</p></div></div><divclass='row'><divclass="col-xs-12"><h3>NOTE</h3><p>HI, MY NAME IS JOHN AND I HAVE A GREAT TRUCK FOR TRANSPORTING CARS, WORK MATTERIAL, OR HEAVY OBJECTS. I HAVE A FULL TIME JOB SO I CAN ONLY HELP YOU ON THE WEEKENDS. I LOVE WORKING WITH MY HANDS SO IF YOU SOME HELP WITH LIFTING OR YARDWORK I
            AM YOUR GUY. BOOK NOW TO CONTACT ME AND LET ME HELP YOU OUT.
          </p></div></div></div>

Solution 2:

I believe your problem is that you have many elements with the "row" class that don't have any columns in them. The hierarchy goes container > row > col. Without a column, there is no need for anything to be declared a row, and it affects the layout in unusual ways without them.

Another problem is your image. Remove the "width" attribute, and add the following class attribute: class="img-responsive". See the Images section of the bootstrap docs for details.

Solution 3:

In my case, I was using box-sizing: content-box; for all my elements in css. That is why padding was creating problems with overall computed width of the elements. So, I changed it to box-sizing: border-box; from box-sizing: content-box;

Ref:https://getbootstrap.com/docs/4.0/getting-started/introduction/#box-sizing