I am facing an issue with my code in blade.php where I need to display images. The ideal layout would be to have the images stacked side by side within a div element, but unfortunately, it's not working as expected.
I have tried using flex, bootstrap, and float, as well as applying display to HTML elements.
.lightbox img {
width: 100%;
margin-bottom: 30px;
transition: .2s ease-in-out;
box-shadow: 0 2px 3px rgba(0, 0, 0, .2);
max-height: 198px;
display: flex;
object-fit: cover;
}<link rel="stylesheet" href="{{ asset('css/app.css') }}"> @foreach($post as $post)
<div class="row pt-5">
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="/storage/{{ $post}}">
<img src="/storage/{{ $post }}" class="w-25">
</a>
</div>
</div>
@endforeachYou can view the current appearance here, displaying images up and down.