Irregular layout with bootstrap [duplicate] - php

Question

This question already has answers here:
Bootstrap row with columns of different height
(3 answers)
Closed 1 year ago.
Unexpected space exists in loop.depend screen width, the space appear or hidden
Link to the web page in the image
<div class="container">
<div class="row">
if (have_posts()): while ( $wp_query->have_posts() ) : $wp_query->the_post();
?>
<div class="col-xxs-12 col-xs-6 col-sm-6 col-md-3 ulockd-prl5">
<div class="ficon-box text-center hvr-shadow ulockd-mb20">
<div class="ficon">
<span class="<?php echo get_post_meta($post->ID, 'hekim-extension_ozellikler_icon-select', true);?> text-thm" title="<?php the_title(); ?>"></span>
</div>
<div class="fib-details">
<h4><?php the_title(); ?></h4>
<p><?php the_excerpt();//html5wp_excerpt('html5wp_index'); // Build your custom callback length in functions.php ?> <?php _e( 'Read More...', 'hekim' )?></p>
<?php // html5wp_excerpt('html5wp_index');?>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
</div>

Answer 1

need add <div class="clearfix visible-xxs-block"></div> after all 4th col-xxs-12 elements.
solution:
<div class="row">
<?php
$xxs_block = 1;
if (have_posts()): while ( $wp_query->have_posts() ) : $wp_query->the_post();
?>
<?php $xxs_block++; ?>
<div class="col-xxs-12 col-xs-6 col-sm-6 col-md-3 ulockd-prl5">
<div class="ficon-box text-center hvr-shadow ulockd-mb20">
<div class="ficon">
<span class="<?php echo get_post_meta($post->ID, 'hekim-extension_ozellikler_icon-select', true);?> text-thm" title="<?php the_title(); ?>"></span>
</div>
<div class="fib-details">
<h4><?php the_title(); ?></h4>
<p><?php the_excerpt();//html5wp_excerpt('html5wp_index'); // Build your custom callback length in functions.php ?> <?php _e( 'Read More...', 'hekim' )?></p>
<?php // html5wp_excerpt('html5wp_index');?>
</div>
</div>
</div>
<?php if ($xxs_block == 5) { ?> <div class="clearfix visible-xxs-block"></div> <?php } ?>