Количество колонок на главной!

5 нельзя! По крайней мере, с равномерно распределенной шириной.
А вот 6 можно - 12 / 6 = 2. Итого нам нужен класс col-2.

Что не позволяют?

 

Прошу прощения, не дописал.. Не позволяют 5 товаров в ряд делать...
Вот в этом шаблоне увидел реализацию "5 в ряд", подумал, что можно это как то проще сделать...:
https://grandstore.medialine.cc/ (GrandStore)

 

Средствами bootstrap нельзя сделать 5 элементов в ряд.
Необходимо либо писать свой класс, либо как в указанном шаблоне запускать карусель, что не так уж и сложно.

 

В интернете есть такое решение...

Код:

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
 
.col-xs-15 {
    width: 20%;
    float: left;
}
 
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
 
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
 
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

Только padding следует сделать в 15px. Не знаю почему автор предлагает 10.

 

А вот так совсем "ногами", если сделать (для 2.3.)?
Для "Акций":
1. catalog/view/theme/default/template/extension/module/special.tpl
сделал так:
<div class="product-layout col-lg-2 col-md-6 col-sm-6 col-xs-12">
4. В bootstrap.min.css:
@Media (min-width:1200px) {
.col-lg-2 {
width: 20%;
3. В админке, в настройках модуля "Акции" установил кол-во товаров: 5
Получилось как на скрине...

 

На самом деле заповедей божьих не 10, а 11.
11-ая звучит очень просто - не тронь файл bootstrap.min.css

 

А когда сработает стиль col-6, то у вас будет 2 полных и 1 неполный ряд.

Если вам нужны товары в 1 ряд, то сделайте карусель. Это наилучшее решение поставленной задачи!

 

Да... так и есть... 2+2+1 получаются... Буду колдовать над каруселью.
Огромное Вам спасибо за подсказки и советы!

 

Как то так.....

Код:

<div class="row">
  <div id="carousel">
    <?php foreach ($products as $product) { ?>
      <div class="product-layout col-xs-12">
        <div class="product-thumb transition">
        ..................................
        </div>
      </div>
    <?php } ?>
  </div>
</div>
<script type="text/javascript">
  $('#carousel').owlCarousel({
    items: 5,
    itemsCustom: false,
    itemsDesktop: [1199, 4],
    itemsDesktopSmall: [991, 4],
    itemsTablet: [767, 3],
    itemsTabletSmall: [639, 2],
    itemsMobile: [479, 1],
    singleItem: false,
    itemsScaleUp: false,
    navigation: true,
    navigationText: ['<i class="fa fa-chevron-left" aria-hidden="true"></i>', '<i class="fa fa-chevron-right" aria-hidden="true"></i>'],
    pagination: false
  });
</script>

В контроллере модуля необходимо подключить скрипт и стили самой карусели...

PHP:

$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.carousel.css');
$this->document->addScript('catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.js');