Question 16860 in Laravel Question posted in
The official Laravel Documentation can be found here.

how to display <div> next to each other within a for loop?(laravel)

I’m working on a alumni portal where I need to display the committee member details. I need to print like 4 members in a line and next 4 in the next line. Any solution would be helpful.
enter image description here

<h2>Member Details</h2>
    <div class="jumbotron container">
        <div class="pull-right">
            <a class="btn btn-primary" data-toggle="modal" id="mediumButton" data-target="#mediumModal" data-attr="{{ route('add_details')}}" title="Add Institute Details"> <i class="fas fa-plus-circle"></i>
            </a>
        </div>
        
        <div class="container main" id="wrapper"> 
                @foreach ($members as $member)
                    <div class="img-box">
                        <pre>
                        <img src="/uploads/image/{{ $member->image }}" width="100" height="100"/>
                        &nbsp; &nbsp; &nbsp; {{ $member->id }}<br/>
                        <a> &nbsp;  {{ $member->name }}</a>
                        
                        <!-- @if(($member->id) >=5 )
                        <span style="white-space: pre-line">
                        </span> 
                        @endif
                        </pre> -->
                    </div>
                @endforeach
        </div>
    </div>
Tags:

2

Answers


  1. 0

    if you use Bootstrap try this

    <div class="row">
  @foreach ($members as $member)
    <div class="col-md-3">
      <div class="img-box">
        <pre>
         <img src="/uploads/image/{{ $member->image }}" width="100" height="100"/>
       &nbsp; &nbsp; &nbsp; {{ $member->id }}<br/>
         <a> &nbsp;  {{ $member->name }}</a>
        </pre>
      </div>
    </div>
  @endforeach
</div>
    Login or Signup to reply.
  2. 0

    Add "display:grid;" to the container "div" tag You need to define the property.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search