Bootstrap grid row starts a column too far over

Question

I have made a simple landing page so that I can work with responsive design. I am using Bootstrap.

I have a grid of 4 items. Each item has an image, a header, a description and a link. On all devices, the grid's rows should contain two columns, apart from extra small, in which case it should contain one column.

This all seems to work fine, having tested on an all 4 Bootstrap sizes. However, when I plug it into Codepen, one of the columns starts in the middle of the row and forces the next column to spill over to the next row. This only happens on small screens (768px to 991px).

I have tried to change certain styling, such as reducing the container width and text size, but nothing produces the desired effect whilst maintaining the design.

Here is a picture of what is happening:

The 'Nullam' div should be on the left of the same row.

Here is a link to the Codepen: http://codepen.io/alanbuchanan/pen/PZXRPr

Here is my HTML:

<div class="bg-brown">
    <div class="container">
        <div class="row top-section">
            <img class="lorem-image" src="http://i.imgur.com/7Eiswkk.png" alt="">
            <h1>Ipsum Dolor sit Amet.</h1>
            <p class="col-lg-offset-2 col-lg-8">Consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
            <div class="col-lg-12">
                <button>Donec quam felis!</button>
            </div>
        </div>
    </div>
</div>

<div class="bg-white">
    <div class="container">
        <div class="row content-section-1">

            <div class="col-sm-6 col-xs-12">
                <img class="img-responsive" src="http://lorempixel.com/400/250/cats/1" alt="">
                <h2 class="thing-header">Ultricies nec.</h2>
                <p class="thing-description">Pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
                <p class="thing-link"><span>Donec pede justo!</span></p>
            </div>

            <div class="col-sm-6 col-xs-12">
                <img class="img-responsive" src="http://lorempixel.com/400/250/cats/2" alt="">
                <h2 class="thing-header">Fringilla vel.</h2>
                <p class="thing-description">Aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut.</p>
                <p class="thing-link"><span>Imperdiet a, venenatis vitae, justo!</span></p>
            </div>

            <div class="col-sm-6 col-xs-12">
                <img class="img-responsive" src="http://lorempixel.com/400/250/cats/3" alt="">
                <h2 class="thing-header">Nullam.</h2>
                <p class="thing-description">Dictum felis eu pede mollis pretium. Integer tincidunt. </p>
                <p class="thing-link"><span>Cras dapibus!</span></p>
            </div>

            <div class="col-sm-6 col-xs-12">
                <img class="img-responsive" src="http://lorempixel.com/400/250/cats/4" alt="">
                <h2 class="thing-header">Vivamus elementum semper nisi.</h2>
                <p class="thing-description">Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu.</p>
                <p class="thing-link"><span>Consequat vitae!</span></p>
            </div>

        </div>
        <div class="row prefooter">
            <p>Eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
        </div>
    </div>
</div>

<div class="bg-bottom">
    <div class="container">
        <div class="row content-section-2">
            <h1><i class="fa fa-github"></i> <a href="https://github.com/alanbuchanan">alanbuchanan</h1></a>
        </div>
    </div>
</div>

Here is my CSS:

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400);
$font-thin: 'Source Sans Pro', sans-serif;

$top-section-bg-color: #48240A;
$btn-bg-color: #a5682a;
$btn-border-width: 2px;
$main-color: #EEEEEE;
$top-section-spacing: 80px;

$content-section-1-bg-color: #EEEEEE;
$content-section-1-font-color: black;

$content-section-2-bg-color: $top-section-bg-color;

body {
    font-family: $font-thin;
    color: $main-color;
    font-weight: 200;
    text-rendering: optimizeLegibility;
    font-size: 14px;
}

a, a:active, a:hover, a:focus {
    text-decoration: none;
    border-bottom: 1px dashed $main-color;  
    color: $main-color;  
}

.bg-brown {
    background-color: $top-section-bg-color;
}

.bg-white {
    background-color: $content-section-1-bg-color;
}

.top-section {

    img {
        display: block;
        margin: 0 auto;
        margin-top: $top-section-spacing;
    }

    h1 {
        text-align: center;
        color: $main-color;
        margin-top: $top-section-spacing;
    }

    p {
        text-align: center;
        margin-top: $top-section-spacing;
    }

    button {
        font-family: $font-thin;
        display: block;

        background-color: $btn-bg-color;

        color: $main-color;    
        font-size: 20px;
        font-weight: 200;
        text-decoration: none;

        cursor: pointer;

        padding: 9px 20px;
        margin: $top-section-spacing auto $top-section-spacing auto;

        border-radius:6px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-style: none;
        border: $btn-border-width solid $btn-bg-color;

        transition: background-color 0.2s ease;

        &:focus {
            outline: none;
        }
    }
}


.content-section-1 {

    background-color: $content-section-1-bg-color;
    color: $content-section-1-font-color;
    margin-top: 100px;

    img {
        display: block;
        margin: 0 auto;
        width: 100%;
    }

    .thing-header {
        margin: 40px 0;
        text-align: center;
        font-weight: 200;
    }

    .thing-description {
        text-align: center;
        margin: 0;
        padding: 0;
        font-size: 14px;
    }

    .thing-link {
        display: block;
        text-align: center;
        font-weight: 400;
        margin-bottom: 40px;

        span {
            text-decoration: none;
            border-bottom: 1px dashed black;
        }
    }
}

.prefooter {
    color: $content-section-1-font-color;
    padding: 50px;
    text-align: center;
}

.bg-bottom {
    background-color: $content-section-2-bg-color;
}

.content-section-2 {
    h1 {
        text-align: center;
        font-weight: 200;
        padding: 50px;
    }
}

html.no-touch button:hover {
    background-color: $top-section-bg-color;
    border: $btn-border-width solid $btn-bg-color;
}

@media screen and (min-width: 320px) and (max-width: 480px) {

    .lorem-image {
        width: 220px;
    }

    .thing-header, .thing-description, .thing-link {
        text-align: left !important;
    }

}

Answer 1

You simply need to clear the float of every 2nd column above 768px since you're using col-sm-6 and no other grid breakpoint. This resolves the difference in height of your columns without the need for adding rows around every 12 columns used.

Note: I added a class of item to each column, you can use whatever makes sense as this is generic.

@media (min-width: 768px) {
  .item:nth-child(2n+1) {
    clear: left;
  }
}

See working example Snippet at FullPage and reduce the viewport.

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400);
 body {
  font-family: "Source Sans Pro", sans-serif;
  color: #EEEEEE;
  font-weight: 200;
  text-rendering: optimizeLegibility;
}
a,
a:active,
a:hover,
a:focus {
  text-decoration: none;
  border-bottom: 1px dashed #EEEEEE;
  color: #EEEEEE;
}
.bg-brown {
  background-color: #48240A;
}
.bg-white {
  background-color: #EEEEEE;
}
.top-section img {
  display: block;
  margin: 0 auto;
  margin-top: 80px;
}
.top-section h1 {
  text-align: center;
  color: #EEEEEE;
  margin-top: 80px;
}
.top-section p {
  text-align: center;
  margin-top: 80px;
}
.top-section button {
  font-family: "Source Sans Pro", sans-serif;
  display: block;
  background-color: #a5682a;
  color: #EEEEEE;
  font-size: 20px;
  font-weight: 200;
  text-decoration: none;
  cursor: pointer;
  padding: 9px 20px;
  margin: 80px auto 80px auto;
  border-radius: 6px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-style: none;
  border: 2px solid #a5682a;
  transition: background-color 0.2s ease;
}
.top-section button:focus {
  outline: none;
}
.content-section-1 {
  background-color: #EEEEEE;
  color: black;
  margin-top: 50px;
}
.content-section-1 img {
  margin: 0 auto;
}
.content-section-1 .thing-header {
  margin: 40px 0;
  text-align: center;
  font-weight: 200;
}
.content-section-1 .thing-description {
  text-align: center;
  margin: 0;
  padding: 0;
}
.content-section-1 .thing-link {
  display: block;
  text-align: center;
  font-weight: 400;
  margin-bottom: 40px;
}
.content-section-1 .thing-link span {
  text-decoration: none;
  border-bottom: 1px dashed black;
}
.prefooter {
  color: black;
  padding: 20px;
  margin-bottom: 20px;
  text-align: center;
}
.bg-bottom {
  background-color: #48240A;
}
.content-section-2 h1 {
  text-align: center;
  font-weight: 200;
  padding: 50px;
}
html.no-touch button:hover {
  background-color: #48240A;
  border: 2px solid #a5682a;
}
.img-row {
  margin: 0 2%;
}
@media screen and (min-width: 320px) and (max-width: 480px) {
  .lorem-image {
    width: 220px;
  }
  .thing-header,
  .thing-description,
  .thing-link {
    text-align: left !important;
  }
}
@media (min-width: 768px) {
  .item:nth-child(2n+1) {
    clear: left;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="bg-brown">
  <div class="container">
    <div class="row top-section">
      <img class="lorem-image" src="http://i.imgur.com/7Eiswkk.png" alt="">
      <h1>Ipsum Dolor sit Amet.</h1>
      <p class="col-lg-offset-2 col-lg-8">Consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
      <div class="col-lg-12">
        <button>Donec quam felis!</button>
      </div>
    </div>
  </div>
</div>

<div class="bg-white">
  <div class="container">
    <div class="row content-section-1">

      <div class="col-sm-6 item">
        <img class="img-responsive" src="http://lorempixel.com/400/250/cats/1" alt="">
        <h2 class="thing-header">Ultricies nec.</h2>
        <p class="thing-description">Pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
        <p class="thing-link"><span>Donec pede justo!</span>
        </p>
      </div>

      <div class="col-sm-6 item">
        <img class="img-responsive" src="http://lorempixel.com/400/250/cats/2" alt="">
        <h2 class="thing-header">Fringilla vel.</h2>
        <p class="thing-description">Aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut.</p>
        <p class="thing-link"><span>Imperdiet a, venenatis vitae, justo!</span>
        </p>
      </div>

      <div class="col-sm-6 item">
        <img class="img-responsive" src="http://lorempixel.com/400/250/cats/3" alt="">
        <h2 class="thing-header">Nullam.</h2>
        <p class="thing-description">Dictum felis eu pede mollis pretium. Integer tincidunt.</p>
        <p class="thing-link"><span>Cras dapibus!</span>
        </p>
      </div>

      <div class="col-sm-6 item">
        <img class="img-responsive" src="http://lorempixel.com/400/250/cats/4" alt="">
        <h2 class="thing-header">Vivamus elementum semper nisi.</h2>
        <p class="thing-description">Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu.</p>
        <p class="thing-link"><span>Consequat vitae!</span>
        </p>
      </div>

      <div class="col-sm-6 item">
        <img class="img-responsive" src="http://lorempixel.com/400/250/cats/2" alt="">
        <h2 class="thing-header">Fringilla vel.</h2>
        <p class="thing-description">Aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut.</p>
        <p class="thing-link"><span>Imperdiet a, venenatis vitae, justo! Imperdiet a, venenatis vitae, justo!</span>
        </p>
      </div>

      <div class="col-sm-6 item">
        <img class="img-responsive" src="http://lorempixel.com/400/250/cats/1" alt="">
        <h2 class="thing-header">Ultricies nec.</h2>
        <p class="thing-description">Pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Nulla consequat massa quis enim. Nulla consequat massa quis enim.</p>
        <p class="thing-link"><span>Donec pede justo! Imperdiet a, venenatis vitae, justo!</span>
        </p>
      </div>

    </div>

    <div class="row prefooter">
      <p>Eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
    </div>

  </div>
</div>


<div class="bg-bottom">
  <div class="container">
    <div class="row content-section-2">
      <h1><i class="fa fa-github"></i> <a href="https://github.com/alanbuchanan">alanbuchanan</a></h1>
    </div>
  </div>
</div>

Answer 2

As has been pointed out, the issue is related to the variable height of your content boxes due to image size and/or line length of the text.

The trick is to have all boxes match the height of the tallest content box and for that I use a small piece of JavaScript.

<div class="row">
    <div class="col-xs-12 col-sm-6 jsEqualHeight"></div>
    <div class="col-xs-12 col-sm-6 jsEqualHeight"></div>
</div>

Using the .jsEqualHeight class

if (jQuery) {
    (function ($) {
        "use strict";
        $(document).ready(function () {

            $(window).on('resize', function () {
                equalHeights();
            });

            equalHeights();

            function equalHeights() {
                if (window.matchMedia("(min-width: 768px)").matches) {

                    var elementHeights = $('.jsEqualHeight').map(function () {
                        return $(this).height();
                    }).get();

                    // Math.max takes a variable number of arguments
                    // 'apply' is equivalent to passing each height as an argument
                    var maxHeight = Math.max.apply(null, elementHeights);

                    // Set each height to the max height
                    $('.jsEqualHeight').height(maxHeight);
                } else {
                    $('.jsEqualHeight').css({ "height": "auto" });
                }
            }
        });
    }(jQuery));
}

You might need to play with the value of the media query in the matchMedia function to suit your solution and depending on your supported browser matrix, a polyfill JS for older browsers that do not support matchMedia.

Answer 3

the problem is with the height of the above elements!

as you can see in the picture the above element pushed the element blow it because of it's hieght!

for example try to put margin: 0px; for the p element at the bottom and the picture will come back to it's place

but that's not the right solution! the right solution is to put each 2 elements for example in one div and then close it and put the other two in another div and close and so on so the each element can be placed without hurting the below ones, so your HTML will look something like this

<div class="row">
    <div class="col-sm-6 col-xs-12"></div>
    <div class="col-sm-6 col-xs-12"></div>
</div>
<div class="row">
    <div class="col-sm-6 col-xs-12"></div>
    <div class="col-sm-6 col-xs-12"></div>
</div>

other than that you're doing good man, good luck with your website.

Answer 4

It's because of the long text you have inside. I suggest you add these for the .thing-description

    white-space:nowrap;
    overflow:hidden;
    text-overflow:clip;

UPDATED PEN