Randy_Johnson
2 months ago

Displaying a 3 by n grid with db data in Blade.

Posted 2 months ago by Randy_Johnson

Okay, so you can see my attempt... I will probably figure it out after tinkering but there must be an easier way, since its such a common feature!

@extends('layouts.app')

@section('title', 'Products')

@section('content')

<div class="container">

    @for($x = 0; $x <= count($products) / 3; $x++)
    
        <div class="row">

        @for($y = 0; $y == 3; $y++)

            <div class="col-lg-4">
                <div class="card" style="width: 18rem;">
                    <img src="{{ asset('img/product/1.jpg') }}" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">{{ $product->name }}</h5>
                        <p class="card-text">{{ $product->description }}</p>
                        <a href="#" class="btn btn-primary">Buy</a>
                    </div>
                </div>
            </div>

        @endfor
            
        </div>

    @endfor
    

</div>

@endsection

Please sign in or create an account to participate in this conversation.