Bootstrap col-sm-6 3 items per line

Question

I have a container with a row and inside that six portfolios items. This code when used on a small screen I get the following result:

• 1st line : 2 images
• 2nd line : 1 image on the right side
• 3rd line : 2 images
• 4th line : 1 image on the left side

Anyone got a clue? Seems like a bug to me.

 <div class="container">

                <div class="row">

                    <div class="col-md-4 col-sm-6 col-xs-12">
                        <div class="portfolio-thumb">
                            <img src="images/portfolio-img1.png" alt="image" class="img-responsive">
                            <div class="portfolio-overlay">
                                <h2>Project One</h2>
                                <a href="#">
                                <i class="fa fa-search"></i>
                                </a>
                            </div>
                        </div>                
                    </div>

                    <div class="col-md-4 col-sm-6 col-xs-12">
                        <div class="portfolio-thumb">
                            <img src="images/portfolio-img2.png" alt="image" class="img-responsive">
                            <div class="portfolio-overlay">
                                <h2>Project One</h2>
                                <a href="#">
                                <i class="fa fa-search"></i>
                                </a>
                            </div>
                        </div>                
                    </div>

                    <div class="col-md-4 col-sm-6 col-xs-12">
                        <div class="portfolio-thumb">
                            <img src="images/portfolio-img3.png" alt="image" class="img-responsive">
                            <div class="portfolio-overlay">
                                <h2>Project One</h2>
                                <a href="#">
                                <i class="fa fa-search"></i>
                                </a>
                            </div>
                        </div>                
                    </div>


                    <div class="col-md-4 col-sm-6 col-xs-12">
                        <div class="portfolio-thumb">
                            <img src="images/portfolio-img4.png" alt="image" class="img-responsive">
                            <div class="portfolio-overlay">
                                <h2>Project One</h2>
                                <a href="#">
                                <i class="fa fa-search"></i>
                                </a>
                            </div>
                        </div>                
                    </div>

                    <div class="col-md-4 col-sm-6 col-xs-12">
                        <div class="portfolio-thumb">
                            <img src="images/portfolio-img1.png" alt="image" class="img-responsive">
                            <div class="portfolio-overlay">
                                <h2>Project One</h2>
                                <a href="#">
                                <i class="fa fa-search"></i>
                                </a>
                            </div>
                        </div>                
                    </div>


                    <div class="col-md-4 col-sm-6 col-xs-12">
                        <div class="portfolio-thumb">
                            <img src="images/portfolio-img1.png" alt="image" class="img-responsive">
                            <div class="portfolio-overlay">
                                <h2>Project One</h2>
                                <a href="#">
                                <i class="fa fa-search"></i>
                                </a>
                            </div>
                        </div>                
                    </div>

                </div>
            </div>

Answer 1

This is due to the different height of each post image, to avoid this use same size images or set the height of your <div class="col-md-4 col-sm-6 col-xs-12">...</div> similar to each other.

You can use the background-image property instead of just using <img> on the <div>.

Solution:

.portfolio-thumb {
  width: 300px;
  height: 200px;
  background-size: cover;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="container">
  <div class="row">

    <div class="col-md-4 col-sm-6 col-xs-12">
      <div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
      <div class="portfolio-overlay">
        <h2>Project One</h2>
        <a href="#">
          <i class="fa fa-search"></i>
        </a>
      </div>
    </div>

    <div class="col-md-4 col-sm-6 col-xs-12">
      <div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
      <div class="portfolio-overlay">
        <h2>Project One</h2>
        <a href="#">
          <i class="fa fa-search"></i>
        </a>
      </div>
    </div>

    <div class="col-md-4 col-sm-6 col-xs-12">
      <div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
      <div class="portfolio-overlay">
        <h2>Project One</h2>
        <a href="#">
          <i class="fa fa-search"></i>
        </a>
      </div>
    </div>


    <div class="col-md-4 col-sm-6 col-xs-12">
      <div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
      <div class="portfolio-overlay">
        <h2>Project One</h2>
        <a href="#">
          <i class="fa fa-search"></i>
        </a>
      </div>            
    </div>

    <div class="col-md-4 col-sm-6 col-xs-12">
      <div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
      <div class="portfolio-overlay">
        <h2>Project One</h2>
        <a href="#">
          <i class="fa fa-search"></i>
        </a>
      </div>        
    </div>


    <div class="col-md-4 col-sm-6 col-xs-12">
      <div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
      <div class="portfolio-overlay">
        <h2>Project One</h2>
        <a href="#">
          <i class="fa fa-search"></i>
        </a>
      </div>
    </div>

  </div>
</div>

Hope this helps!