Issue
I've been working with Bootstrap 5 and have made something like this before; on each "eventoCard," I need a gutter or space between them; what is happening is that I'm displaying 4 different cards, and they are all stuck up together.
<section class="container eventoslist" data-aos="fade-up">
<div class="row d-flex justify-content-around">
@foreach ($events->take(4) as $event)
<div class="eventoCard col-lg-3 col-md-6 col-sm-12 mb-3 p-0">
<div class="eventoCardImg">
@if (count($event->photos))
<img src="{{ asset('storage/event_photos/' .$event->photos()->orderBy('destaque', 'asc')->orderBy('created_at', 'desc')->first()->fotografia) }}"
class="img-post" alt="Event image">
@else
<img src="{{ asset('storage/event_photos/defaultevent.jpg') }}" class="img-post"
alt="default image">
@endif
</div>
<div class="cardInfo text-center">
<h5>{{ $event->name }}</h5>
<p class="cardDescription">{{ $event->descricao }}</p>
<a href="{{ route('eventoinfo', ['event' => $event]) }}">
<button class="btn CardBtn">Saber
mais
</button>
</a>
</div>
</div>
@endforeach
</div>
</section>
Solution
Using the gap
utility class in Bootstrap 5, you can add spacing between your Bootstrap cards. This class applies a margin to all sides of an element. Here's how you can modify your code to add a gap between your cards.
<section class="container eventoslist" data-aos="fade-up">
<div class="row d-flex justify-content-around gap-3">
@foreach ($events->take(4) as $event)
<div class="eventoCard col-lg-3 col-md-6 col-sm-12 mb-3 p-0">
<div class="eventoCardImg">
@if (count($event->photos))
<img src="{{ asset('storage/event_photos/' .$event->photos()->orderBy('destaque', 'asc')->orderBy('created_at', 'desc')->first()->fotografia) }}"
class="img-post" alt="Event image">
@else
<img src="{{ asset('storage/event_photos/defaultevent.jpg') }}" class="img-post"
alt="default image">
@endif
</div>
<div class="cardInfo text-center">
<h5>{{ $event->name }}</h5>
<p class="cardDescription">{{ $event->descricao }}</p>
<a href="{{ route('eventoinfo', ['event' => $event]) }}"><button class="btn CardBtn">Saber
mais</button></a>
</div>
</div>
@endforeach
</div>
</section>
The gap-3
class to the row
div applies a margin of 1rem
(16px) to all sides of each card. You can adjust the number after gap-
to increase or decrease the spacing. For example, gap-1
applies a margin of 0.25rem
(4px), gap-2
applies a margin of 0.5rem
(8px), and so on.
Answered By - Karl Hill
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.