How to change layout in bootstrap - laravel

Question

I want to show my products in horizontal. In one line only three pics shown and 3 rows only 9 latest pics shown. How can I do this?
blade file:
<div class="gallery-grids-row">
<div class="col-md-4">
#foreach($data as $row)
<div class="wpf-demo-4">
<a href="{{ URL::to('/') }}/images/{{ $row->image }}" class="jzBoxLink item-hover" title="Maecenas sodales tortor ac ligula ultrices dictum et quis urna.">
<img src="{{ URL::to('/') }}/images/{{ $row->image }}" class="img-responsive" alt=" " style="width: 380px; height: 263px;" />
<div class="view-caption">
<p>{{ $row->name }}</p>
</div>
</a>
</div>
#endforeach
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
controller:
public function index()
{
$data = Post::all();
return view('index', compact('data'));
}

Answer 1

change your blade to this: one whole line in top of foreach and 1/3 of each line in each foreach:
<div class="gallery-grids-row">
<div class="row"><!-- this changed -->
#php($index = 0)
#foreach($data as $row)
#if($index < 9)
<div class="wpf-demo-4 col-md-4"><!-- this line changed -->
<a href="{{ URL::to('/') }}/images/{{ $row->image }}" class="jzBoxLink item-hover" title="Maecenas sodales tortor ac ligula ultrices dictum et quis urna.">
<img src="{{ URL::to('/') }}/images/{{ $row->image }}" class="img-responsive" alt=" " style="width: 380px; height: 263px;" />
<div class="view-caption">
<p>{{ $row->name }}</p>
</div>
</a>
</div>
#endif
#php($index += 1)
#endforeach
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
in your controller you can limit the collection that you are getting
like this:
$data = Post::orderBy('created_at', 'desc')->get(); //this line gets the posts record ordering by date
This last example looks like this:
Example of display tested

Answer 2

You can try filtering the query and limiting the results to 9 or paginate.
Controller
public function index()
{
$data = Post::orderBy('created_at', 'desc')->limit(9)->get();
return view('home')->with(['data' => $data]);
}
View
<div class="gallery-grids-row">
<div class="row">
#foreach($data as $row)
<div class="wpf-demo-4 col-md-4">
<a href="{{ URL::to('/') }}/images/{{ $row->image }}" class="jzBoxLink item-hover" title="Maecenas sodales tortor ac ligula ultrices dictum et quis urna.">
<img src="{{ URL::to('/') }}/images/{{ $row->image }}" class="img-responsive" alt=" " style="width: 380px; height: 263px;" />
<div class="view-caption">
<p>{{ $row->name }}</p>
</div>
</a>
</div>
#endforeach
<div class="clearfix"></div>
</div>
<div class="clearfix"> </div>
</div>
This last example looks like this:
Example of display without pagination tested
Or alternative paginated
Controller
public function index()
{
$data = Post::orderBy('created_at', 'desc')->paginate(9);
return view('home')->with(['data' => $data]);
}
View
<div class="gallery-grids-row">
<div class="row">
#foreach($data as $row)
<div class="wpf-demo-4 col-md-4">
<a href="{{ URL::to('/') }}/images/{{ $row->image }}" class="jzBoxLink item-hover" title="Maecenas sodales tortor ac ligula ultrices dictum et quis urna.">
<img src="{{ URL::to('/') }}/images/{{ $row->image }}" class="img-responsive" alt=" " style="width: 380px; height: 263px;" />
<div class="view-caption">
<p>{{ $row->name }}</p>
</div>
</a>
</div>
#endforeach
<div class="clearfix"></div>
</div>
<div class="clearfix"> </div>
{{ $data->links() }}
</div>
This last example looks like this:
Example of display tested