CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
goofenhour
goofenhour

Reputation: 169

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 of what is going on:

SS

Here is my code

<div class='container-fluid'>

  <div class="row"> <!-- 1 -->
    <div class="col-sm-5 col-md-4">
      <h1>JOHN SMITH</h1>
    </div>
  </div>

  <div class='row'> <!-- 2 -->
    <div class="col-sm-5 col-md-4">
      <h2>VULCAN FLATBED</h2>
    </div>
  </div>

  <div class="row"> <!-- 3 -->
    <div class="col-sm-4 col-md-4 col-lg-4" style="background-color:yellow;">

      <div class='row'>
          <img src="vulcan.jpg" alt="vehicle image" width='391'/>
      </div>
      <div class='row'>
        <button type='submit'>
          <img src="[email protected]" alt="book now">
        </button>
      </div>

    </div>

    <div class="col-sm-8 col-md-8 col-lg-8" style="background-color:pink;"> <!-- RIGHT SIDE -->

      <div class='row'>

        <h3>CAN HELP WITH</h3>
        <p>LIFTING & YARD WORK</p>
      </div>
      <div class='row'>
        <h3>AVAILABLE</h3>
        <p>ALL WEEKENDS</p>
      </div>
      <div class='row'>
        <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> <!-- end 3 -->

  <hr>
</div> <!-- end wrap -->

Upvotes: 8

Views: 41808

Answers (3)

Jamshaid K.
Jamshaid K.

Reputation: 4547

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

Upvotes: 1

Rick
Rick

Reputation: 1913

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.

Upvotes: 3

dippas
dippas

Reputation: 60543

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%

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class='container-fluid'>
  <div class="row">
    <!-- 1 -->
    <div class="col-sm-5 col-md-4">
      <h1>JOHN SMITH</h1>
    </div>
  </div>
  <div class='row'>
    <!-- 2 -->
    <div class="col-sm-5 col-md-4">
      <h2>VULCAN FLATBED</h2>
    </div>
  </div>

  <div class="row">
    <!-- 3 -->
    <div class="col-sm-4 col-md-4 col-lg-4" style="background-color:yellow;">

      <div class='row'>
        <div class="col-xs-12">
          <img class="img-responsive" src="//lorempixel.com/500/200" alt="vehicle image" />
        </div>
      </div>
      <div class='row'>
        <div class="col-xs-12">
          <button type='submit'>
            <img src="[email protected]" alt="book now">
          </button>
        </div>
      </div>
    </div>
    <div class="col-sm-8 col-md-8 col-lg-8" style="background-color:pink;">
      <!-- RIGHT SIDE -->

      <div class='row'>
        <div class="col-xs-12">
          <h3>CAN HELP WITH</h3>
          <p>LIFTING & YARD WORK</p>
        </div>
      </div>
      <div class='row'>
        <div class="col-xs-12">
          <h3>AVAILABLE</h3>
          <p>ALL WEEKENDS</p>
        </div>
      </div>
      <div class='row'>
        <div class="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>

Upvotes: 9

Related Questions