@FimozMozga

Как разместить карточки bootstrap как на примере?

Господа, во фронте вообще почти не шарю. Вот понадобилось кое что реализовать.
Сейчас у меня вот так выводятся все объявления6075ec6f2d866381043289.jpeg
А нужно что бы было вот так 6075eca5c1124994299440.png
Подскажите, силами bootstrap'a можно такое сделать?
Вот такой код
<div class="row justify-content-center">
		@foreach($moderationAds as $ad)
		<div class="col-4 p-1">	
		  	<div class="card rounded-0">
		    	<img class="card-img-top img-fluid" src="{{$ad->photo}}" alt="Card image cap">
		    	<div class="card-body">
		      		<h5 class="card-title">{{$ad->title}}</h5>
		      		<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
		      		<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
		      		<a href="{{route('showModerationOnAd', ['id' => $ad->user_id, 'ad' => $ad->id])}}" class="btn-sm btn btn-primary">show</a>
		    	</div>
		  	</div>	
		</div>	
		@endforeach
	</div>
  • Вопрос задан
  • 83 просмотра
Решения вопроса 1
смотрите Masonry-подобные колонки

https://bootstrap-4.ru/docs/4.6/components/card/#c...
https://getbootstrap.com/docs/5.0/examples/masonry/
либо уже гриды
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы