here's my code:
<div class="list-items <?php echo $class_respl; ?> ">
<?php $j = 0;
foreach ($list as $_product) { $j++;
?>
<!-- Begin bs-item-cf -->
<div class="item bs-item cf">
<!-- Begin bs-item-inner -->
<div class="item-inner">
<?php if ($_product->_image) { ?>
<div class="box-image">
<a href="<?php echo $_product->link ?>"
title="<?php echo $_product->title; ?>"
<?php echo $helper->parseTarget($this->_getConfig('target')); ?>
>
<img src="<?php echo $_product->_image; ?>"
title="<?php echo $_product->title; ?>"
alt="<?php echo $_product->title; ?>"
>
</a>
<div class="bottom-action">
<?php if ((int)$this->_getConfig('product_addcart_display', 1)) { ?>
<?php if ($_product->isSaleable()){ ?>
<?php if ($_product->getTypeInstance()->hasRequiredOptions($_product)){ ?>
<button class="action tocart btn-action btn-cart" data-mage-init='{"redirectUrl": {"url": "<?php echo $block->getAddToCartUrl($_product) ?>"}}' type="button" title="<?php echo __('Add to Cart') ?>">
<span><?php echo __('Add to Cart') ?></span>
</button>
<?php } else { ?>
<?php $postDataHelper = $this->helper('Magento\Framework\Data\Helper\PostHelper');
$postData = $postDataHelper->getPostData($block->getAddToCartUrl($_product), ['product' => $_product->getEntityId()])
?>
<button class="action tocart btn-action btn-cart"
data-post='<?php echo $postData; ?>'
type="button" title="<?php echo __('Add to Cart') ?>">
<span><?php echo __('Add to Cart') ?></span>
</button>
<?php } ?>
<?php } else { ?>
<?php if ($_product->getIsSalable()){ ?>
<div class="stock available"><span><?php echo __('In stock') ?></span></div>
<?php } else { ?>
<div class="stock unavailable"><span><?php echo __('Out of stock') ?></span></div>
<?php } ?>
<?php } ?>
<?php } ?>
<?php if ((int)$this->_getConfig('product_addwishlist_display', 1) || (int)$this->_getConfig('product_addcompare_display', 1)) { ?>
<?php if ($this->helper('Magento\Wishlist\Helper\Data')->isAllow() && (int)$this->_getConfig('product_addwishlist_display', 1) ){ ?>
<a href="#" data-post='<?php echo $block->getAddToWishlistParams($_product); ?>' class="action towishlist btn-action link-wishlist" data-action="add-to-wishlist" title="<?php echo __('Add to Wish List') ?>">
<span><?php echo __('Add to Wish List') ?></span>
</a>
<?php } ?>
<?php if ($block->getAddToCompareUrl() && (int)$this->_getConfig('product_addcompare_display', 1)){ ?>
<?php
$compareHelper = $this->helper('Magento\Catalog\Helper\Product\Compare');
?>
<a href="#" class="action tocompare btn-action link-compare"
data-post='<?php echo $compareHelper->getPostDataParams($_product);?>'
data-role="add-to-links"
title="<?php echo __('Add to Compare'); ?>">
<span><?php echo __('Add to Compare') ?></span>
</a>
<?php }; ?>
<?php } ?>
</div>
</div>
<?php }?>
<!-- Begin bs-content -->
<?php ?>
<div class="product details product-item-details box-info">
<?php if ((int)$this->_getConfig('product_title_display', 1)) { ?>
<h2 class="product name product-item-name product-name">
<a href="<?php echo $_product->link; ?>" title="<?php echo $_product->title; ?>"
<?php echo $helper->parseTarget($this->_getConfig('target')); ?>
>
<?php echo $helper->truncate($_product->title, $this->_getConfig('product_title_maxlength')); ?>
</a>
</h2>
<?php } ?>
<?php if ($this->_getConfig('product_source') != 'media') { ?>
<?php if ((int)$this->_getConfig('product_price_display', 1)) {
echo $this->getProductPrice($_product);
} ?>
<?php if ((int)$this->_getConfig('product_reviews_count', 1)) {
$templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface:
HORT_VIEW;
echo $block->getReviewsSummaryHtml($_product,$templateType,true);
} ?>
<?php } ?>
<?php if ((int)$this->_getConfig('product_description_display', 1) && $helper->_trimEncode($_product->_description) != '') { ?>
<div class="bs-description">
<?php echo $_product->_description; ?>
</div>
<?php } ?>
<?php if ($this->_getConfig('cat_title_display') == 1 && $this->_getConfig('product_source') != 'media') { ?>
<div class="bs-category"><?php echo __('Category: ') ;?>
<a href="<?php echo $_product->cat_link; ?>" title="<?php echo $_product->cat_title; ?>" <?php echo $helper->parseTarget($this->_getConfig('target')); ?>>
<?php echo $helper->truncate($_product->cat_title, $this->_getConfig('category_title_max_characs', 25)); ?>
</a>
</div>
<?php } ?>
<?php if ($this->_getConfig('product_source') != 'media') { ?>
<?php if ((int)$this->_getConfig('product_addcart_display', 1) ||(int)$this->_getConfig('product_addwishlist_display', 1) || (int)$this->_getConfig('product_addcompare_display', 1)) { ?>
<div class="product actions product-item-actions">
</div>
<?php } ?>
<?php } ?>
<?php if ($this->_getConfig('product_readmore_display') == 1) { ?>
<div class="bs-detail">
<a href="<?php echo $_product->link ?>"
title="<?php echo $_product->title; ?>"
<?php echo $helper->parseTarget($this->_getConfig('target')); ?>
>
<?php echo $this->_getConfig('product_readmore_text', 'Details'); ?>
</a>
</div>
<?php } ?>
</div>
<!-- End bs-content -->
</div>
<!-- End bs-item-inner -->
</div><!-- End bs-item-cf -->
<?php
$clear = 'clr1';
if ($j % 2 == 0) $clear .= ' clr2';
if ($j % 3 == 0) $clear .= ' clr3';
if ($j % 4 == 0) $clear .= ' clr4';
if ($j % 5 == 0) $clear .= ' clr5';
if ($j % 6 == 0) $clear .= ' clr6';
?>
<div class="<?php echo $clear; ?>"></div>
<?php } ?>
</div>
