提交的表单bootstrap / php列表

Question

I am trying to get a list of users submitted forms, each with image, title, description and an edit and delete button. I was trying to get them in a list without numbers or bullets, one after another, but I am not succeding, any help would be very much appreciated. Thank you in advance. Here is the code:

<div class="container-fluid">
<p><a href="/validated/shows/create-show" class="btn btn-primary" role="button">Create show</a></p>
        @if(sizeof($shows) > 0)
    @foreach($shows as $index => $show)
    @if($index%3 == 0)
        <div class="row">
        @endif
          <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
                <img src="{{$show->path}}">
              <div class="caption">
                <h3>{{$show->title}}</h3>
                <p>{{$show->description}}</p>
              </div>
              <p><a href="/validated/shows/edit-show/{{$show->id}}" class="btn btn-primary" role="button">Edit Show</a></p>
              <form action="/validated/shows/delete-show" method="POST">
                <input type="hidden" name="_token" value="{{ csrf_token() }}" required>
                <input type="hidden" name="id" value="{{$show->id}}" required>
            <p><a href="/validated/shows/delete-show/{{$show->id}}" class="btn btn-primary" role="button">Delete</a></p>
            </form>
            </div>
          </div>
        @if(($index+1)%3 == 0)
        </div>
        @endif
    @endforeach

</div>

Answer 1

It looks like you using some php template engine in your example, so here is my solution on pure php without any template engines. This snippet will output shows by three per row.

<?php if(count($shows) > 0): ?>
    <div class="row">

    <?php foreach($shows as $index => $show): ?>

        <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
                <img src="<?= $show->path ?>">
                <div class="caption">
                    <h3><?= $show->title ?></h3>
                    <p><?= $show->description ?></p>
                </div>
                <p>
                    <a href="/validated/shows/edit-show/<?= $show->id ?>" class="btn btn-primary" role="button">Edit Show</a>
                </p>
                <form action="/validated/shows/delete-show" method="POST">
                    <input type="hidden" name="_token" value="<?=  csrf_token() ?>" required>
                    <input type="hidden" name="id" value="<?= $show->id ?>" required>
                    <p><a href="/validated/shows/delete-show/<?= $show->id ?>" class="btn btn-primary" role="button">Delete</a></p>
                </form>
            </div>
        </div>
        <?php if(
            (($index + 1) % 3) == 0 && $index < (count($shows) - 1)): ?>
            </div>
            <div class="row">
        <?php endif; ?>
    <?php endforeach; ?>
    </div>
<?php endif; ?>

But if you want really responsove layout, just exclude this part from the code (as for as you using bootstrap, it will do all work for you - see fiddle):

<?php if((($index + 1) % 3) == 0 && $index < (count($shows) - 1)): ?>
    </div>
    <div class="row">
<?php endif; ?>