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

Question

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.

<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>

use Bootstrap Grid. see here https://www.w3schools.com/bootstrap4/bootstrap_grid_examples.asp — Bhargav Chudasama, Dec 01 '22 at 06:30
see this answer: https://stackoverflow.com/questions/29546550/flexbox-4-items-per-row — Bhargav Chudasama, Dec 01 '22 at 06:41
Does this answer your question? [Flexbox: 4 items per row](https://stackoverflow.com/questions/29546550/flexbox-4-items-per-row) — Bhargav Chudasama, Dec 01 '22 at 06:53
It didn't work with this method maybe because of loop. But it did work with the below comment. Thanks anyway. — Preethi Shetty, Dec 01 '22 at 07:11

Danz · Accepted Answer · 2022-12-01T07:34:54.953

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>

edited Dec 01 '22 at 07:34

answered Dec 01 '22 at 06:28

Danz

252
1
8

It displays 1 member per line. – Preethi Shetty Dec 01 '22 at 06:34
are you use bootstrap? – Danz Dec 01 '22 at 06:48
Yes. I'm using. – Preethi Shetty Dec 01 '22 at 06:50
1

change col-3 to col-md-3, what version of Bootstrap do you use? – Danz Dec 01 '22 at 07:07
I'm using Bootstrap 3, col-md-3 worked. Thank You.. – Preethi Shetty Dec 01 '22 at 07:10
Can you edit your above answer so that I can accept it. – Preethi Shetty Dec 01 '22 at 07:17
ok, already changed – Danz Dec 01 '22 at 07:36
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 03 '22 at 08:02

score -2 · Answer 2 · answered Dec 01 '22 at 06:30

-2

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

answered Dec 01 '22 at 06:30

Mustafa Kerem CANSEV

32
2

share as a comment, not as an answer. – Bhargav Chudasama Dec 01 '22 at 06:30

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

2 Answers2

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