edit template bootstrap to display 4 product image at row - php

Question

I am developing my application with laravel5.2 .I have template with bootstrap and want to display 4 products with their pictures at each row.
this is my template
#extends('layouts.layout',[['subscribe'=>$subscribe]])
#section('content')
<section id="advertisement">
<div class="container">
<img src="{{asset('images/shop/advertisement.jpg')}}" alt="" />
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="left-sidebar">
#include('shared.sidebar',array('brands'=>$brands))
</div>
</div>
<div class="col-sm-9 padding-right">
<div class="features_items"><!--features_items-->
<h2 class="title text-center">Features Items</h2>
#foreach ($products as $product)
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="images/shop/{{$product->image}}" height="200" width="150" alt="">
<h2>{{$product->price}}</h2>
<h6><p>{{$product->name}}</p></h6>
<i class="fa fa-shopping-cart"></i>Add to cart
<i class="fa fa-info"></i>View Details
</div>
<div class="product-overlay">
<div class="overlay-content">
<h2>${{$product->price}}</h2>
<p>${{$product->name}}</p>
<form method="POST" action="{{url('cart')}}">
<input type="hidden" name="product_id" value="{{$product->id}}">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<button type="submit" class="btn btn-fefault add-to-cart">
<i class="fa fa-shopping-cart"></i>
Add to cart
</button>
</form>
<i class="fa fa-info"></i>View Details
</div>
</div>
</div>
<div class="choose">
<ul class="nav nav-pills nav-justified">
<li><i class="fa fa-plus-square"></i>Add to wishlist</li>
<li><i class="fa fa-plus-square"></i>Add to compare</li>
</ul>
</div>
</div>
</div>
#endforeach
<ul class="pagination">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>»</li>
</ul>
</div><!--features_items-->
</div>
</div>
</div>
</section>
#endsection
It is not disciplined.it display 4 at row in time and 2 in time .please help me to do it.

Answer 1

In order to have nested columns (4*x columns sm-3 inside the column sm-9) you need to wrap the 4 columns in a row so that it becomes
<div class="col-sm-9">
<div class="row">
#foreach ($products as $product)
<div class="col-sm-3">
...