What is happening to my grid system? Bootstrap

Question

Why are my pictures lining up strangely at col-sm-6? I understand that at that point each row should two pictures in a row. However, they are stacking strangely and I am left with two pictures in one row and a row of one picture below that. What am I doing wrong?

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="img/moss.jpg" class="img-responsive">
  </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="img/moss.jpg" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="img/moss.jpg" class="img-responsive">
    </div>
  </div>
   <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4" >
      <img src="img/moss.jpg" class="img-responsive">
  </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="img/moss.jpg" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="img/moss.jpg" class="img-responsive">
    </div>
  </div>
   <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="img/moss.jpg" class="img-responsive">
  </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="img/moss.jpg" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="img/moss.jpg" class="img-responsive">
    </div>
  </div>
</div>
</section>
</div>

I need every row to have two pictures on at col-sm-6

Because `col-sm-6` calculate 50% width & `col-sm-4` calculate 33.33% width — Minal Chauhan, Apr 28 '17 at 11:20

score 1 · Answer 1 · answered Apr 28 '17 at 11:19

No need to repeat row class

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="img/moss.jpg" class="img-responsive">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="img/moss.jpg" class="img-responsive">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="img/moss.jpg" class="img-responsive">
        </div>

        <div class="col-xs-12 col-sm-6 col-md-4" >
            <img src="img/moss.jpg" class="img-responsive">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="img/moss.jpg" class="img-responsive">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="img/moss.jpg" class="img-responsive">
        </div>

        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="img/moss.jpg" class="img-responsive">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="img/moss.jpg" class="img-responsive">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="img/moss.jpg" class="img-responsive">
        </div>
    </div>
</div>

score 0 · Answer 2 · answered Apr 28 '17 at 11:23

In Bootstrap col-sm-6 has 50% width & col-sm-4 has 33.33% width so that you need to used col-sm-4 if you want three image per row.

.img-responsive {
  margin-bottom: 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-4">
      <img src="https://www.phoronix.com/assets/categories/linuxgaming.jpg" class="img-responsive">
  </div>
    <div class="col-xs-12 col-sm-4">
      <img src="https://www.phoronix.com/assets/categories/linuxgaming.jpg" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-4">
      <img src="https://www.phoronix.com/assets/categories/linuxgaming.jpg" class="img-responsive">
    </div>
  </div>
   <div class="row">
    <div class="col-xs-12 col-sm-4" >
      <img src="https://www.phoronix.com/assets/categories/linuxgaming.jpg" class="img-responsive">
  </div>
    <div class="col-xs-12 col-sm-4">
      <img src="https://www.phoronix.com/assets/categories/linuxgaming.jpg" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-4">
      <img src="https://www.phoronix.com/assets/categories/linuxgaming.jpg" class="img-responsive">
    </div>
  </div>
   <div class="row">
    <div class="col-xs-12 col-sm-4">
      <img src="https://www.phoronix.com/assets/categories/linuxgaming.jpg" class="img-responsive">
  </div>
    <div class="col-xs-12 col-sm-4">
      <img src="https://www.phoronix.com/assets/categories/linuxgaming.jpg" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-4">
      <img src="https://www.phoronix.com/assets/categories/linuxgaming.jpg" class="img-responsive">
    </div>
  </div>
</div>

Przemysław Zalewski · Accepted Answer · 2017-04-28T11:58:05.837

The row class starts a new row block where columns are laid out one after another. In order to display grid view you should place all items in a single row.

In your broken case each row contains up to 3 columns - that is why the third item has no sibling as the next row is rendered underneath.

Please see following snippet (expand it to see media queries in action):

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
  </div>
</div>

Another example using col-xs-12 col-sm-6 col-md-3 col-lg-2 Bootrap's grid system:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
      <img src="https://placebear.com/640/450" class="img-responsive">
    </div>
  </div>
</div>

at extra extra small I am trying to make the pictures go full width but it still isn't working — Benjamints, Apr 28 '17 at 11:49
There are no col-xss-{number} in Bootstrap by default. Please use xs breakpoint or [redefine Bootsrap's grid](http://stackoverflow.com/questions/24066059/bootstrap-3-adding-a-new-set-of-columns). — Przemysław Zalewski, Apr 28 '17 at 11:56
So if I wanted all the pictures to be 100% width at 500px I have to create my own breakpoint? — Benjamints, Apr 28 '17 at 12:08
col-xs-12 should do the job as it is defined as `width: 100%` and should span whole row unitil hitting [`sm` breakpoint at 768px](http://stackoverflow.com/a/29837346/1384679). Maybe you are overriding it somewhere. Please post your test case. However, if you want to break at 500px exactly then use raw media queries. — Przemysław Zalewski, Apr 28 '17 at 12:17

What is happening to my grid system? Bootstrap

3 Answers3