bootstrap 4网格行和php @foreach

Question

I am trying to switch over a site to Bootstrap 4 from Bootstrap3 and having an issue with the Grid "row" option when nesting with looping through a PHP Laravel @foreach loop.

The code that I have tried in different ways looks like:

<div class="row">
<div class="col-12">
    <div class="row">
        @foreach($sofas as $sofa)

        @if(isset($sofa['Sub']))

        <a href="{{ Request::url() }}/{{ $sofa['Style'] }}">
            <div class="col-12 col-sm-4 col-md-3" style="padding:0 5px 0 5px;">
                <div class="product_tile">
                    <div class="product_tile_style">{{ $sofa['StyleName'] }}</div>
                    <div class="product_tile_frame">Frame {{ $sofa['Style'] }}</div>

                    <div class="product_tile_thumb">
                        <img width="200" height="140" src="/imagelib/bigthumbs/{{ $sofa['url'] }} " alt="">
                    </div>
                </div>
            </div>
        </a>

        @endif
        @endforeach
    </div>
</div>

The expected outcome should look like the following: Example of what it should look like.

And this is the random mess that I am getting where it is shrinking everything and not expanding to the columns. Example of what I am getting which is wrong.

Any ideas and help would be greatly appreciated.

Thank you all in advance!