Bootstrap flex in foreach loop

I am new to bootstrap and I am trying to organize my side with bootstrap flex. I tried multiple bootstrap flex variation, but the result is same it create one big row and it won't create any new line as I want. I suppose it is because of the foreach loop it can be influence by positioning the div, but I get one row or one column. But as I say I am beginner so I could also do some fundamental mistake. Here is my code:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>E-shop</title>

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">


</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>


<nav class="navbar navbar-light bg-light">
    <h1>E-shop</h1>
    @if (Route::has('login'))
        <div class="hidden fixed top-0 right-0 px-6 py-4 sm:block">
            @auth
                <a href="/shopping_cart"><img src="shopping_cart.webp" height=100 class="corner" id="corner"></a>
                <a href="{{ url('/home') }}" class="text-sm text-gray-500 underline">Home</a>
            @else
                <a href="{{ route('login') }}" class="text-sm text-gray-500 underline">Login</a>
                &nbsp &nbsp
                @if (Route::has('register'))
                    <a href="{{ route('register') }}" class="ml-4 text-sm text-gray-500 underline">Register</a>
                    &nbsp &nbsp
                @endif
            @endif
        </div>
    @endif
</nav>
<div class="d-flex bd-highlight">
        @foreach($products as $product)
            <div class="p-2 flex-fill bd-highlight">
                <img src="{{ asset("images/" . $product->image) }}" height="300" width="400" alt="Image is not available">
                <div class="caption"><a href="/product/{{$product->id}}/show" class="caption"> {{ $product->name }} {{ $product->model }}</a></div>
            </div>
        @endforeach
</div>
</body>
</html>

MohamedTammam

3 years ago

Best Answer

Level 51

Use grid layout instead

<div class="row bd-highlight">
        @foreach($products as $product)
            <div class="p-2 col-sm-3 bd-highlight">
                <img src="{{ asset("images/" . $product->image) }}" height="300" width="400" alt="Image is not available">
                <div class="caption"><a href="/product/{{$product->id}}/show" class="caption"> {{ $product->name }} {{ $product->model }}</a></div>
            </div>
        @endforeach
</div>

https://getbootstrap.com/docs/4.1/layout/grid/

1 like

Please or to participate in this conversation.