Wordpress Custom Layout in Search Result Page with Bootstrap - php

Question

I would like some help if possible in the following question:
I use in my Genesis theme a bootstrap grid, and would like to display the search results using this grid.
I created a search.php with the following code:
<?php
/**
* Search Results Template File
*/
get_header(); ?>
<header>
<h1>Search Results: "<?php echo get_search_query(); ?>"</h1>
<br>
</header>
<?php if ( have_posts() ) : // results found?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="gr-infos-container-cliente">
<div class="gr-promo-do-cliente"><?php the_field('tipo_de_promo');?></div>
<div class="gr-img-cliente"><img src="<?php echo get_field('foto_cliente_miniatura');?>" alt="" class="img-responsive center-block"></div>
<div class="gr-nome-cliente"><?php the_title();?></div>
<div class="gr-tagline-cliente"><?php the_field('tagline_do_anunciante');?></div>
<div class="gr-bairro-do-cliente"><i class="cliente fa fa-map-marker"></i><?php the_field('bairro_do_cliente');?></div>
</div>
</div>
</div> <!-- Row -->
</div> <!-- Container -->
<?php endwhile; ?>
<?php else : // no results?>
<article>
<h1>No Results Found.</h1>
</article>
<?php endif; ?>
<?php get_footer(); ?>
genesis();
But in the search result, the content is aligned one on top of another and not in the selected grid.
Any tips you can give me?
I am very grateful for any help!

Answer 1

This is due to that your 'row' div is inside the while loop, causing it to generate multiple 'row' div instead of one.
To fix this, you'll need to place the while loop inside the 'row' div.
Try the code bellow
<?php
/**
* Search Results Template File
*/
get_header(); ?>
<header>
<h1>Search Results: "<?php echo get_search_query(); ?>"</h1>
<br>
</header>
<?php if ( have_posts() ) : // results found?>
<div class="container-fluid">
<div class="row">
<?php while ( have_posts() ) : the_post(); ?>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="gr-infos-container-cliente">
<div class="gr-promo-do-cliente"><?php the_field('tipo_de_promo');?></div>
<div class="gr-img-cliente"><img src="<?php echo get_field('foto_cliente_miniatura');?>" alt="" class="img-responsive center-block"></div>
<div class="gr-nome-cliente"><?php the_title();?></div>
<div class="gr-tagline-cliente"><?php the_field('tagline_do_anunciante');?></div>
<div class="gr-bairro-do-cliente"><i class="cliente fa fa-map-marker"></i><?php the_field('bairro_do_cliente');?></div>
</div>
</div>
<?php endwhile; ?>
</div> <!-- Row -->
</div> <!-- Container -->
<?php else : // no results?>
<article>
<h1>No Results Found.</h1>
</article>
<?php endif; ?>
<?php get_footer(); ?>
genesis();