goofenhour goofenhour - 5 months ago 117
HTML Question

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="book_now_button@2x.png" 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 -->

Answer

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="book_now_button@2x.png" 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>

Comments