How to display 5 columns per row in Opencart?

Question

How to display 5 columns per row in opencart?

What I have tried is Extensions -> Modules ->Featured then edit the module. I have changed the limit to 5 and decreased the width and height but after changing it displays the same. I am not able to get five columns per row. Please suggest me how to acheve it.

Thank you.

Answer 1

Here is my popular.tpl file in catalog/view/theme/promoglasses/template/module

<div class="tab-title">
<h2>Popular Products</h2>
<ul class="tabs tabs-popular-products tab_categorys">
<li class="active" rel="tab129-popular-products">POPULAR Products</li>
</ul>
</div>
<br />
<br />
<br />

<div class="row">
  <?php foreach ($products as $product) { ?>
  <div class="product-layout col-sm-5ths">
    <div class="product-thumb transition">
      <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive" /></a></div>
      <div class="caption">
        <h4><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></h4>
        <div class="label-cont"> As low as </div>
        <div class="label-price">
        <?php if ($product['price']) { ?>
        <p class="price">
          <?php if (!$product['special']) { ?>
          <?php echo $product['price']; ?>
          <?php } else { ?>
          <span class="price-new"><?php echo $product['special']; ?></span> <span class="price-old"><?php echo $product['price']; ?></span>
          <?php } ?>
          <?php if ($product['tax']) { ?>
         
          <?php } ?>
        </p>
        <?php } ?>
        
        </div>
        <div class="label-sup">
        <b>
          <sup>(C)</sup>
        </b>
        </div>
        <br />
        <p><?php echo $product['description']; ?></p>
        <?php if ($product['rating']) { ?>
        <div class="rating">
          <?php for ($i = 1; $i <= 5; $i++) { ?>
          <?php if ($product['rating'] < $i) { ?>
          <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
          <?php } else { ?>
          <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span>
          <?php } ?>
          <?php } ?>
        </div>
        <?php } ?>
        
      </div>
      
    </div>
  </div>
  <?php } ?>
</div>

For the CSS part here I have written the code for class col-sm-5ths:

.col-sm-5ths {
    float: left;
    width: 20%;
    min-height: 1px;
    position: relative;
}