CODEWITHSUNDEEP
htmlcss
anggor
anggor

Reputation: 105

Problem with div element not position side by side

I have a code in blade.php that need to show images. Ideally, the images should stack side by side with div element. But it seems not working.

I tried flex, bootstrap and float. Use display in html element. 

.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>
@endforeach

Here is current view-it show up and down images

Upvotes: 1

Views: 49

Answers (1)

Cuong Le Ngoc
Cuong Le Ngoc

Reputation: 11975

Changing position of your @foreach may help:

<link rel="stylesheet" href="{{ asset('css/app.css') }}">
    <div class="row pt-5">
      @foreach($post as $post)
        <div class="col-sm-6 col-md-4">
            <a class="lightbox" href="/storage/{{ $post}}">
                <img src="/storage/{{ $post }}" class="w-25">
            </a>
        </div>
      @endforeach
    </div>

Upvotes: 1

Related Questions