Bootstrap 4 Image продукт не выстроился правильно

Question

Я пытаюсь сделать простую страницу покупок в Интернете для моего обучения PHP. Но я застрял в той части HTML, где использование начальной загрузки не помогло что-то попроще.

В результате выполнения кода мой продукт выстраивается вертикально, и я хочу, чтобы он выстраивался горизонтально.

Код:

<div class="container">

<?php
$connect = mysqli_connect('localhost', 'root', '', 'cart');
$query = 'SELECT * FROM products ORDER by id ASC';
$result = mysqli_query($connect, $query);

if ($result):
  if (mysqli_num_rows($result)>0):
    while ($product = mysqli_fetch_assoc($result)):
      //print_r($product);
      ?>
      <div class="col-sm-4">
        <form class="" action="welcome.php?action=add&id=<?php echo $product['id'] ?>" method="post">
          <div class="products">
            <img src="<?php echo $product['image']; ?>" class="img-fluid text-center" />
            <h4 class="text-info"><?php echo $product['name']; ?></h4>
            <h4>$ <?php echo $product['price']; ?></h4>
            <input type="text" name="quantity" class="form-control" value="1" />
            <input type="hidden" name="name" value="<?php echo $product['name'] ?>" />
            <input type="hidden" name="price" value="<?php echo $product['price']; ?>" />
            <button type="submit" name="add_to_cart" class="btn btn-outline-primary">Add to Cart</button>

          </div>
        </form>
      </div>
      <?php
    endwhile;
  endif;
endif;

 ?>

Answer 1

Чтобы система сетки начальной загрузки работала, теги должны быть в следующем порядке:

<div class="container">
  <div class="row">
    <div class="col-md-6">
      One of two columns
    </div>
    <div class="col-md-6">
      One of two columns
    </div>
  </div>
</div>