Good afternoon, I had a problem with the blocks when adapting to bootstrap. When I use class col-sm-6, I would like the blocks to go in two rows, I have 4 such blocks and they have different sizes, the first two become normal, but the third one replaces 4 blocks, and 4 block becomes picture below is the code:

<div class="container"> <div class="row"> <div class="card-row clearfix"> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 clearfix"> <div class="card "> <a href="#"><img src="images/layer-5.png"></a> <div class="card-about"> <a href="#"><h3>Animation films</h3></a> <i class="glyphicon glyphicon-map-marker"><span>Movies</span></i> <p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p> </div> <hr> <div class="social clearfix"> <ul class="rate"> <li class="star active"></li> <li class="star active"></li> <li class="star"></li> <li class="star"></li> </ul> <a href="#"><img src="images/facebook.png"></a> </div> </div> <div class="card "> <a href="#"><img src="images/layer-8.png"></a> <div class="card-about"> <a href="#"><h3>Animation films</h3></a> <i class="glyphicon glyphicon-map-marker"><span>Movies</span></i> <p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p> </div> <hr> <div class="social clearfix"> <ul class="rate"> <li class="star active"></li> <li class="star active"></li> <li class="star"></li> <li class="star"></li> </ul> <a href="#"><img src="images/facebook.png"></a> </div> </div> <div class="card "> <a href="#"><img src="images/layer-8.png"></a> <div class="card-about"> <a href="#"><h3>Animation films</h3></a> <i class="glyphicon glyphicon-map-marker"><span>Movies</span></i> <p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p> </div> <hr> <div class="social clearfix"> <ul class="rate"> <li class="star active"></li> <li class="star active"></li> <li class="star"></li> <li class="star"></li> </ul> <a href="#"><img src="images/facebook.png"></a> </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 clearfix"> <div class="card "> <a href="#"><img src="images/layer-6.png"></a> <div class="card-about"> <a href="#"><h3>Animation films</h3></a> <i class="glyphicon glyphicon-map-marker"><span>Movies</span></i> <p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p> </div> <hr> <div class="social clearfix"> <ul class="rate"> <li class="star active"></li> <li class="star active"></li> <li class="star"></li> <li class="star"></li> </ul> <a href="#"><img src="images/facebook.png"></a> </div> </div> <div class="card "> <a href="#"><img src="images/layer-7.png"></a> <div class="card-about"> <a href="#"><h3>Animation films</h3></a> <i class="glyphicon glyphicon-map-marker"><span>Movies</span></i> <p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p> </div> <hr> <div class="social clearfix"> <ul class="rate"> <li class="star active"></li> <li class="star active"></li> <li class="star"></li> <li class="star"></li> </ul> <a href="#"><img src="images/facebook.png"></a> </div> </div> <div class="card "> <a href="#"><img src="images/layer-7.png"></a> <div class="card-about"> <a href="#"><h3>Animation films</h3></a> <i class="glyphicon glyphicon-map-marker"><span>Movies</span></i> <p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p> </div> <hr> <div class="social clearfix"> <ul class="rate"> <li class="star active"></li> <li class="star active"></li> <li class="star"></li> <li class="star"></li> </ul> <a href="#"><img src="images/facebook.png"></a> </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 mod-col-3"> <div class="card "> <a href="#"><img src="images/layer-7.png"></a> <div class="card-about"> <a href="#"><h3>Animation films</h3></a> <i class="glyphicon glyphicon-map-marker"><span>Movies</span></i> <p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p> </div> <hr> <div class="social clearfix"> <ul class="rate"> <li class="star active"></li> <li class="star active"></li> <li class="star"></li> <li class="star"></li> </ul> <a href="#"><img src="images/facebook.png"></a> </div> </div> <div class="card "> <a href="#"><img src="images/layer-5.png"></a> <div class="card-about"> <a href="#"><h3>Animation films</h3></a> <i class="glyphicon glyphicon-map-marker"><span>Movies</span></i> <p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p> </div> <hr> <div class="social clearfix"> <ul class="rate"> <li class="star active"></li> <li class="star active"></li> <li class="star"></li> <li class="star"></li> </ul> <a href="#"><img src="images/facebook.png"></a> </div> </div> <div class="card "> <a href="#"><img src="images/layer-8.png"></a> <div class="card-about"> <a href="#"><h3>Animation films</h3></a> <i class="glyphicon glyphicon-map-marker"><span>Movies</span></i> <p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p> </div> <hr> <div class="social clearfix"> <ul class="rate"> <li class="star active"></li> <li class="star active"></li> <li class="star"></li> <li class="star"></li> </ul> <a href="#"><img src="images/facebook.png"></a> </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 mod-col-4"> <div class="card "> <a href="#"><img src="images/layer-8.png"></a> <div class="card-about"> <a href="#"><h3>Animation films</h3></a> <i class="glyphicon glyphicon-map-marker"><span>Movies</span></i> <p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p> </div> <hr> <div class="social clearfix"> <ul class="rate"> <li class="star active"></li> <li class="star active"></li> <li class="star"></li> <li class="star"></li> </ul> <a href="#"><img src="images/facebook.png"></a> </div> </div> <div class="card "> <a href="#"><img src="images/layer-6.png"></a> <div class="card-about"> <a href="#"><h3>Animation films</h3></a> <i class="glyphicon glyphicon-map-marker"><span>Movies</span></i> <p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p> </div> <hr> <div class="social clearfix"> <ul class="rate"> <li class="star active"></li> <li class="star active"></li> <li class="star"></li> <li class="star"></li> </ul> <a href="#"><img src="images/facebook.png"></a> </div> </div> <div class="card "> <a href="#"><img src="images/layer-7.png"></a> <div class="card-about"> <a href="#"><h3>Animation films</h3></a> <i class="glyphicon glyphicon-map-marker"><span>Movies</span></i> <p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p> </div> <hr> <div class="social clearfix"> <ul class="rate"> <li class="star active"></li> <li class="star active"></li> <li class="star"></li> <li class="star"></li> </ul> <a href="#"><img src="images/facebook.png"></a> </div> </div> </div> </div> </div> </div>

Maybe someone knows the solution to this problem?

    1 answer 1

    Use .col-sm-6 classes instead of .col-sm-6 classes. The bottom line is that in the sum all the numbers in the classes on the blocks, which should be on the same line, should be 12.

    That is, 6 + 6 = 12, therefore two blocks on one line. And if you want to place 4 blocks on one line, then replace with .col-sm-3 (3 + 3 + 3 + 3 = 12).