Bootstrap grid not displaying correctly

Question

how can I display correctly my grid without huge space, and look good?

my photo

My code:

<div class="first">
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/General/02/35/49/87/2354987_w2.jpg" class="img-responsive"/>
        </div>

        <div class="col-md-3">
            <img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/Comp_Matches/01/83/81/26/1838126_s2.jpg" class="img-responsive"/>
        </div>

        <div class="col-md-3">
            <img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/Comp_Matches/02/36/89/27/2368927_s2.jpg" class="img-responsive"/>
        </div>

        <div class="col-md-6">
            <img src="http://i.telegraph.co.uk/multimedia/archive/03498/BEAU_3498448b.jpg" class="img-responsive"/>
        </div>

        <div class="col-md-3">
            <img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/Comp_Matches/01/83/81/26/1838126_s2.jpg" class="img-responsive"/>
        </div>

        <div class="col-md-3">
            <img src="http://img.uefa.com/MultimediaFiles/Photo/competitions/Comp_Matches/02/36/89/27/2368927_s2.jpg" class="img-responsive"/>
        </div>
    </div>
</div>

Maybe I should use any JS script or smthing? Please help :)

Answer 1

You need to clear the float added to the columns (columns have float: left applied to them by default) at the breakpoint(s) you're using (992px for col-md-*) or place your columns inside individual rows when you have a total of 12 columns.

<div classs=container>
  <div classs=row>
    <div classs=col-*-6>
    <div classs=col-*-6>
  <div><!-- EQUALS 12 COLUMNS -->
  <div classs=row>
    <div classs=col-*-6>
    <div classs=col-*-3>
    <div classs=col-*-3>
  <div><!-- EQUALS 12 COLUMNS -->
<div>

Example Using Rows

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <div class="row">
    <div class="col-md-6">
      <img src="http://placehold.it/500x250/000" class="img-responsive" />
    </div>
    <div class="col-md-3">
      <img src="http://placehold.it/250x250/f00" class="img-responsive" />
    </div>
    <div class="col-md-3">
      <img src="http://placehold.it/250x250/ff0" class="img-responsive" />
    </div>
  </div>

  <div class="row">
    <div class="col-md-6">
      <img src="http://placehold.it/500x250/000" class="img-responsive" />
    </div>
    <div class="col-md-3">
      <img src="http://placehold.it/250x250/f00" class="img-responsive" />
    </div>
    <div class="col-md-3">
      <img src="http://placehold.it/250x250/ff0" class="img-responsive" />
    </div>
  </div>

  <div class="row">
    <div class="col-md-6">
      <img src="http://placehold.it/500x250/000" class="img-responsive" />
    </div>
    <div class="col-md-3">
      <img src="http://placehold.it/250x250/f00" class="img-responsive" />
    </div>
    <div class="col-md-3">
      <img src="http://placehold.it/250x250/ff0" class="img-responsive" />
    </div>
  </div>

</div>

Example Clearing the Float @ 992px yourself while only utilizing a single row for all your columns. Note: Make sure to specify these columns somehow so this doesn't disturb another part of the grid elsewhere; the example using a generic .item class to handle this but can be done in many ways.

See nth-child and clear on MDN for more info.

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">

    <div class="col-md-6 item">
      <img src="http://placehold.it/500x250/000" class="img-responsive" />
    </div>

    <div class="col-md-3 item">
      <img src="http://placehold.it/250x250/f00" class="img-responsive" />
    </div>

    <div class="col-md-3 item">
      <img src="http://placehold.it/250x250/ff0" class="img-responsive" />
    </div>

    <div class="col-md-6 item">
      <img src="http://placehold.it/500x250/000" class="img-responsive" />
    </div>

    <div class="col-md-3 item">
      <img src="http://placehold.it/250x250/f00" class="img-responsive" />
    </div>

    <div class="col-md-3 item">
      <img src="http://placehold.it/250x250/ff0" class="img-responsive" />
    </div>

    <div class="col-md-6 item">
      <img src="http://placehold.it/500x250/000" class="img-responsive" />
    </div>

    <div class="col-md-3 item">
      <img src="http://placehold.it/250x250/f00" class="img-responsive" />
    </div>

    <div class="col-md-3 item">
      <img src="http://placehold.it/250x250/ff0" class="img-responsive" />
    </div>

  </div>
</div>