I'm currently working on a photo gallery index.
How can I make it so that my loop iterates all 4 columns and then proceeds making a new row?
This is my code:
<div class="row">
#foreach($photoGalleries as $photoGallery)
<div class="col-md-3">
<a href="{{ url('/photogalleries/' . $photoGallery->id) }}">
<img class="img-fluid" style="height: 200px; width: 200px;" src="/images/{{ $photoGallery->cover_image }}">
</a>
<h3>{{ $photoGallery->name }}</h3>
</div>
#endforeach
</div>
Now as you can imagine, it'll appear like this:
Alternative solution:
Add margin-top after the col-md-3 attribute, like so:
<div class="col-md-3" style="margin-top: 20px;">
</div>
$collectionOne = $photoGalleries->chunk(4);
#foreach($collectionOne as $collectionTwo)
<div class "row" >
#foreach($collectionTwo as $photoGallery)
<div class="col-md-3">
......
</div>
#endforeah
</div>
#endforeach
Related
I'm using Bootstrap's 5 card and Laravel to make a car card. When I try to make a row with cards, the image shrinks. If I remove the "row" class, its image fits perfectly. ¿How can I solve this issue?
<h1>Vehículos</h1>
<div class="row">
#foreach ($autos as $auto)
<div class="card" style="width: 18rem; border-radius: 25px;">
<a href="{{ URL('auto/'.$auto->id)}}">
<img src="{{ URL('images/'.$auto->foto)}}" class="card-img-top" alt="..." style="border-top-right-radius: 25px; border-top-left-radius: 25px;">
</a>
<div class="card-body">
<h5 class="card-title">{{$auto->marca." ".$auto->modelo}}</h5>
<p class="card-text">
Año: {{$auto->año}}
Kilometros: {{$auto->kilometros}}
Motor: {{$auto->motor}}
Combustible: {{$auto->combustible}}
Precio: $ {{$auto->precio}}
</p>
</div>
</div>
#endforeach
</div>
</div> ```
[1]: https://i.stack.imgur.com/TviHn.png
I had to reproduce the error on my own end and I found the issue. When using a bootstrap row , you have to add columns using the col class. So change your code to this
<h1>Vehículos</h1>
<div class="row">
#foreach ($autos as $auto)
<div class="col">
<div class="card" style="width: 18rem; border-radius: 25px;">
<a href="{{ URL('auto/'.$auto->id)}}">
<img src="{{ URL('images/'.$auto->foto)}}" class="card-img-top" alt="..." style="border-top-right-radius: 25px; border-top-left-radius: 25px;">
</a>
<div class="card-body">
<h5 class="card-title">{{$auto->marca." ".$auto->modelo}}</h5>
<p class="card-text">
Año: {{$auto->año}}
Kilometros: {{$auto->kilometros}}
Motor: {{$auto->motor}}
Combustible: {{$auto->combustible}}
Precio: $ {{$auto->precio}}
</p>
</div>
</div>
</div>
#endforeach
</div>
</div>
This would fix the issue of the image being shrinked.
SIDENOTE: Do note that the bootstrap col class has prefixes to make it adapt to different screens. You can check out the docs for more info.
I have this in view. It is able to upload alright but it won't show. Is there anything more I should add?
<div class="col-md-4">
<img class="img img-fluid img-thumbnail" src="/storage/profile_images/{{$profile->profile_image}}"/> </div>
here is my show.blade.php file
<div class="col-md-4">
<img class="img img-fluid img-thumbnail" src="/storage/profile_images/{{$profile->profile_image}}"/></div>
Here is the player.blade.php file:
#if(count($players) > 0)
<?php $index = 0; ?>
#foreach($players as $player)
<div class="col-md-4">
<div class="card mb-1" style="width:300px">
<div class="card-body">
<img class="img img-fluid img-thumbnail" style="height: 170px; width: 350px" src="/storage/profile_images/{{$player->profile_image}}">
</div>
<div class="card-footer">
<div class="row justify-content-center">
{{$names[$index]}}<br>
</div>
<div class="row">
<div class="col-10">
<span class="h6">Team: {{$player->current_fc}}</span><br>
<span class="h6">Position: {{$player->position}}</span><br>
</div>
</div>
</div>
</div>
</div>
<?php $index++; ?>
#endforeach
<div class="col-12 mt-3">
{{$players->appends(request()->input())->links()}}
</div>
#else
<p>No Players available</p>
#endif
Follow above your image issue will be resolved:
Step 1:
Delete storage folder from public
Step 2:
Inside your project run this command
player.blade.php
php artisan storage:link
Step 3:
Replace or change as per this:
show.blade.php
<div class="col-md-4">
<img class="img img-fluid img-thumbnail" src="{{ url('storage/profile_images/.$profile->profile_image) }}" /></div>
Step 4:
Replace or change as per you required:
#if(count($players) > 0)
<?php $index = 0; ?>
#foreach($players as $player)
<div class="col-md-4">
<div class="card mb-1" style="width:300px">
<div class="card-body">
<img class="img img-fluid img-thumbnail" style="height: 170px; width: 350px" src="{{ url('storage/profile_images/.$profile->profile_image) }}">
</div>
<div class="card-footer">
<div class="row justify-content-center">
{{$names[$index]}}<br>
</div>
<div class="row">
<div class="col-10">
<span class="h6">Team: {{$player->current_fc}}</span><br>
<span class="h6">Position: {{$player->position}}</span><br>
</div>
</div>
</div>
</div>
</div>
<?php $index++; ?>
#endforeach
<div class="col-12 mt-3">
{{$players->appends(request()->input())->links()}}
</div>
#else
<p>No Players available</p>
#endif
You can use the asset function like in the example below:
#php
$imgUrl = '/storage/profile_images/'.$profile->profile_image;
#endphp
<img class="img img-fluid img-thumbnail" src="{{ asset($imgUrl)}}"/>
Also make sure that the storage is linked using the following command:
php artisan storage:link
Let’s say I have a foreach post that shows the last 5 posts, and I would like to position them as the boostrap featurette (with text and image changing To left and right side: example: https://getbootstrap.com/docs/4.0/examples/carousel/
i tried but it's not display well and not responsive. so if you have time, pls help.
<div class="container">
#foreach($posts as $post)
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">{{ $post->title }}</h2>
<p class="lead">{{ $post->title }}</p>
</div>
<div class="col-md-5">
<img class="featurette-image img-fluid mx-auto" src="{{ asset('assets/img/laptop-1385702_1920.jpg') }}" alt="Generic placeholder image">
</div>
</div>
<br>
#endforeach
</div>
--> not working : result
I have this:
#foreach($portfolios as $portfolio)
<div id="item-portfolio-expand{{$portfolio->id}}" class="item-portfolio-expand expand">
<div class="container">
<div class="row">
<div class="col-md-8">
col-md-8
</div>
<div class="col-md-4">
{{ __('Name')}}: {{ $portfolio->name }}
</div>
</div>
</div>
</div>
#endforeach
And this:
#foreach ($portfolios as $portfolio)
<div class="portfolio-item {{ $portfolio->tag }} " data-category="transition">
<img src="{{ $portfolio->image_show }}">
<a href="#item-portfolio-expand{{$portfolio->id}}" data-toggle="collapse" data-target="#item-portfolio-expand{{$portfolio->id}}" data-parent="#item-portfolio-expand{{$portfolio->id}}">
<div class="portfolio-item-overlay">
<p class="name-item-overlay">{{ $portfolio->name }}</p>
</div>
</a>
</div>
#endforeach
And when I press the in the first foreach, I want to toggle the second foreach at <div id = "item-portfolio-expand {{$ portfolio-> id}}" class = "item- portfolio-expand expand "> I just don't succeed at anything, I use bootstrap and jquery in the project. .item-portfolio-expand has display: none;
And at the same time when one is open and another is selected, to close the one already open and to appear the one selected with toggle.
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!