Bootstrap rows and columns not working properly inside for each loop

Question

I tried to use bootstrap row and columns classes inside a for each loop and some extra spaces are displayed as unexpected.

First I used the following code and it worked well.

<table border="0" id="myTable" class="table" >  
        <thead border-bottom="0">  
            <tr>
                <th border-bottom="0" style="display: none;">Gem</th> 
                <th border-bottom="0" style="display: none;">Name</th>
            </tr>  
        </thead>  
        <tbody>
            @foreach(App\GemStone::where('active',TRUE)->orderBy('created_at', 'desc')->get() as $gemStone)

            <div class="row"> 
            <tr>
            <td style="display: none;" >{{$gemStone->created_at}}</td>


                <td>
                        <div class="col-sm-3">
                            <div align="center"> 
                                <img alt="Gem Stone Pic" src="{{route('get_image',['id' => $gemStone->id])}} " class="img-circle img-responsive">
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <h3><b><a href="#">{{$gemStone->type->type}}</a></b></h3>
                            @if($gemStone->shop->user->id == Auth::user()->id)
                            <a href="{{route('view_update_gem_stone',['id' => $gemStone->id])}}">[Edit]</a><br>
                            @endif
                            {{$gemStone->size->size}}<br>
                            LKR: {{$gemStone->price}}<br>
                            <div> 
                                {{$gemStone->description}}<br>
                                {{$gemStone->created_at}}
                            </div>
                        </div>
                        <div class="col-sm-3"> free space of 3 cols </div>
                        <div class="col-sm-3">free space of 3 cols </div>
                </td>        


            </tr>
            </div>

            @endforeach
        </tbody>  
    </table>

above code gave a view like this image. In order to use the free space marked in the picture, I tried adding another column by creating another <td> ... </td> inside <tr> </tr> using $counter variable as below.

        <table border="0" id="myTable" class="table" >  
        <thead border-bottom="0">  
            <tr>
                <th border-bottom="0" style="display: none;">Gem</th> 
                <th border-bottom="0" style="display: none;">Name</th> 
                <th border-bottom="0" style="display: none;">Name</th>
            </tr>  
        </thead>  
        <tbody>
            <?php $count = 0 ?>
            @foreach(App\GemStone::where('active',TRUE)->orderBy('created_at', 'desc')->get() as $gemStone)
            <?php $count = $count + 1 ?>
            @if($count % 2)
            <tr>
                <div class="row">
                    <td style="display: none;" >{{$gemStone->created_at}}</td> 
                    @endif                  
                    <td>
                        <div class="col-sm-3">
                            <div align="center"> 
                                <img alt="Gem Stone Pic" src="{{route('get_image',['id' => $gemStone->id])}} " class="img-circle img-responsive">
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <h3><b><a href="#">{{$gemStone->type->type}}</a></b></h3>
                            @if($gemStone->shop->user->id == Auth::user()->id)
                            <a href="{{route('view_update_gem_stone',['id' => $gemStone->id])}}">[Edit]</a><br>
                            @endif
                            {{$gemStone->size->size}}<br>
                            LKR: {{$gemStone->price}}<br>
                            <div> 
                                {{$gemStone->description}}<br>
                                {{$gemStone->created_at}}
                            </div>
                        </div>
                    </div>
                </td>        
                @if(!($count % 2))
            </div>
        </tr>
        @endif
        @endforeach
        @if($count%2)
        <td>extra cell when odd</td>
    </div>
</tr>
@endif

Result looked like this which is unexpected. I tried changing the place of <div class='row'> and <div class = 'col-s6'>in several ways, but nothing worked. And I couldn't really find a mistake in the code as well . It would be grateful if someone can point where I go wrong while using the columns and row classes.

And I'm using jquery datatables to get the table view.

That's because you're jamming elements between table elements that shouldn't be there, i.e. the only permitted parent of a td is a tr. When you start using the Bootstrap grid system outside of it's intended usage undesired effects are to be expected. From the looks of it, your table is unnecessary and is attempting to do what the grid system can accomplish on it's own. — hungerstar
– hungerstar, Commented May 2, 2017 at 20:01
You can get table like behavior by JUST using bootstrap rows and cols getbootstrap.com/css/#grid-example-basic — ajc
– ajc, Commented May 2, 2017 at 20:05
@AchalaDissanayake.. why dnt you assign the classes directly to the tr and td? <tr class="row"> <td class="col-xx-xx"></td></tr> — ajc
– ajc, Commented May 2, 2017 at 20:14
@ajc your suggestion did the trick. May be you can post it as an answer that I can accept it. — Achala Dissanayake
– Achala Dissanayake, Commented May 2, 2017 at 20:29

ajc · Accepted Answer · 2017-10-12 19:15:54Z

4

Add the bootstrap classes to your table elements, instead of adding additional div elements.

<table>
  <tr class="row">
    <td class="col-md-4">1</td>
    <td class="col-md-4">2</td>
    <td class="col-md-4">3</td>
  </tr>
</table>

edited Oct 12, 2017 at 19:15

answered May 2, 2017 at 20:31

ajc

1,73514 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Bootstrap rows and columns not working properly inside for each loop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related