Web Tasarım da yardımcı olur musunuz ?

[Furkan Yurtlu]

Arkadaşlar şimdi aşağı uzunca bir kod bırakıyorum bu kart sınıflarını yan yana sıralamam gerekiyor yardımcı olur musunuz

<div class="row g-4 justify-content-center">
<div class="col-md-6 col-lg-4 col-xl-3 wow fadeInUp" data-wow-delay="0.1s"> <!--resmin oldugu konum ve geçiş süresi-->
<div class="service-item rounded">
<div class="service-img rounded-top"> <!--resmin çerçeve ayarı -->
<img src="img/haber1.jpg" class="img-fluid rounded-top w-100" alt=""><!--kartın içindeki resim ve boyutu-->
</div>
<div class="service-content rounded-bottom bg-light p-4">
<div class="service-content-inner">
<h5 class="mb-4">Mezun Buluşmaları</h5> <!--kartın içindeki başlık-->
<p class="mb-4">17 Haziran 2023 <!--kartın içindeki paragraf-->
Bilgisayar Teknolojileri Mezun Buluşmaları 2023
Haberler</p>
<a href="#" class="btn btn-secondary rounded-pill text-white py-2 px-4 mb-2">Daha Fazla</a><!--etrafı ovall buton -->
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 wow fadeInUp" data-wow-delay="0.3s">
<div class="service-item rounded">
<div class="service-img rounded-top">
<img src="img/haber2.jpg" class="img-fluid rounded-top w-100" alt="">
</div>
<div class="service-content rounded-bottom bg-light p-4">
<div class="service-content-inner">
<h5 class="mb-4">Öğrenci Bilgilendirme</h5>
<p class="mb-4">26 Ocak 2023
Yüksekokulumuzda Ölçme Değerlendirme Teknikleri, Doğru Sınav Sorusu Hazırlama ve Değerlendirme Eğitimi Verildi
Haberler</p>
<a href="#" class="btn btn-secondary rounded-pill text-white py-2 px-4 mb-2">Daha Fazla</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 wow fadeInUp" data-wow-delay="0.5s">
<div class="service-item rounded">
<div class="service-img rounded-top">
<img src="img/haber3.jpg" class="img-fluid rounded-top w-100" alt="">
</div>
<div class="service-content rounded-bottom bg-light p-4">
<div class="service-content-inner">
<h5 class="mb-4">Farkındalık Eğitimi </h5>
<p class="mb-4">15 Aralık 2022
Yüksekokulumuzda "Kadına Yönelik Şiddete Karşı Hukuksal Mücadele" Konulu Seminer Düzenlendi
Haberler</p>
<a href="#" class="btn btn-secondary rounded-pill text-white py-2 px-4 mb-2">Daha Fazla</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 wow fadeInUp" data-wow-delay="0.7s">
<div class="service-item rounded">
<div class="service-img rounded-top">
<img src="img/haber4.jpg" class="img-fluid rounded-top w-100" alt="">
</div>
<div class="service-content rounded-bottom bg-light p-4">
<div class="service-content-inner">
<h5 class="mb-4">Farkındalık Eğitim</h5>
<p class="mb-4">15 Aralık 2022
Yüksekokulumuzda Afet Farkındalık Eğitimi
Haberler</p>
<a href="#" class="btn btn-secondary rounded-pill text-white py-2 px-4 mb-2">Daha Fazla</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 wow fadeInUp" data-wow-delay="0.1s">
<div class="service-item rounded">
<div class="service-img rounded-top">
<img src="img/haber5.jpeg" class="img-fluid rounded-top w-100" alt="">
</div>
<div class="service-content rounded-bottom bg-light p-4">
<div class="service-content-inner">
<h5 class="mb-4">Girişimcilik Eğitimi</h5>
<p class="mb-4">15 Aralık 2022
Yüksekokulumuz "Vocathlon University" Temel Girişimcilik Kampında!</p>
<a href="#" class="btn btn-secondary rounded-pill text-white py-2 px-4 mb-2">Daha Fazla</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 wow fadeInUp" data-wow-delay="0.3s">
<div class="service-item rounded">
<div class="service-img rounded-top">
<img src="img/haber6.jpg" class="img-fluid rounded-top w-100" alt="">
</div>
<div class="service-content rounded-bottom bg-light p-4">
<div class="service-content-inner">
<h5 class="mb-4">Orta öğretim Ziyareti</h5>
<p class="mb-4">15 Aralık 2022
Cide Bayram Yusuf Aslan Mesleki ve Teknik Anadolu Lisesinden Yüksekokulumuza Ziyaret
Haberler</p>
<a href="#" class="btn btn-secondary rounded-pill text-white py-2 px-4 mb-2">Daha Fazla</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 wow fadeInUp" data-wow-delay="0.5s">
<div class="service-item rounded">
<div class="service-img rounded-top">
<img src="img/haber7.jpg" class="img-fluid rounded-top w-100" alt="">
</div>
<div class="service-content rounded-bottom bg-light p-4">
<div class="service-content-inner">
<h5 class="mb-4">Farkındalık Eğitimi</h5>
<p class="mb-4">12 Aralık 2023
Yüksekokulumuzda " HIV İnfeksiyonu / AIDIS " ve " Verem Hastalığı " Semineri Düzenlendi
Haberler</p>
<a href="#" class="btn btn-secondary rounded-pill text-white py-2 px-4 mb-2">Daha Fazla</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 wow fadeInUp" data-wow-delay="0.7s">
<div class="service-item rounded">
<div class="service-img rounded-top">
<img src="img/haber8.jpg" class="img-fluid rounded-top w-100" alt="">
</div>
<div class="service-content rounded-bottom bg-light p-4">
<div class="service-content-inner">
<h5 class="mb-4">Narkotik Farkındalık Eğitimi</h5>
<p class="mb-4">25 Ekim 2023
Yüksekokulumuzda "Narko Gençlik" Semineri Düzenlendi
Haberler</p>
<a href="#" class="btn btn-secondary rounded-pill text-white py-2 px-4 mb-2">Daha Fazla</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 wow fadeInUp" data-wow-delay="0.7s">
<div class="service-item rounded">
<div class="service-img rounded-top">
<img src="img/haber9.jpeg" class="img-fluid rounded-top w-100" alt="">
</div>
<div class="service-content rounded-bottom bg-light p-4">
<div class="service-content-inner">
<h5 class="mb-4">Tübitak</h5>
<p class="mb-4">04 Ekim 2023
TÜBİTAK 2209-A Üniversite Öğrencileri Araştırma Projeleri Destekleme Programına 2 Projemiz Kabul Edildi
Haberler</p>
<a href="#" class="btn btn-mediumvioletred btn-secondary rounded-pill text-white py-2 px-4 mb-2">Daha Fazla</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 wow fadeInUp" data-wow-delay="0.7s">
<div class="service-item rounded">
<div class="service-img rounded-top">
<img src="img/haber10.jpg" class="img-fluid rounded-top w-100" alt="">
</div>
<div class="service-content rounded-bottom bg-light p-4">
<div class="service-content-inner">
<h5 class="mb-4">Tübitak Eğitimi</h5>
<p class="mb-4">22 Haziran 2023
Yüksekokulumuz Öğrencilerine Doç. Dr. Erol TEKİN Hocamız Tarafından Tübitak 2209 Eğitimi Verildi
Haberler
</p>
<a href="#" class="btn btn-secondary rounded-pill text-white py-2 px-4 mb-2">Daha Fazla</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 wow fadeInUp" data-wow-delay="0.7s">
<div class="service-item rounded">
<div class="service-img rounded-top">
<img src="img/haber11.jpg" class="img-fluid rounded-top w-100" alt="">
</div>
<div class="service-content rounded-bottom bg-light p-4">
<div class="service-content-inner">
<h5 class="mb-4">Tübitak Eğitimi</h5>
<p class="mb-4">22 Haziran 2023
Yüksekokulumuz Öğrencilerine Doç. Dr. Osman Sabri KESBİÇ Hocamız Tarafından Tübitak 2209 Eğitimi Verildi
Haberler

</p>
<a href="#" class="btn btn-secondary rounded-pill text-white py-2 px-4 mb-2">Daha Fazla</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 wow fadeInUp" data-wow-delay="0.7s">
<div class="service-item rounded">
<div class="service-img rounded-top">
<img src="img/haber12.jpg" class="img-fluid rounded-top w-100" alt="">
</div>
<div class="service-content rounded-bottom bg-light p-4">
<div class="service-content-inner">
<h5 class="mb-4">Veda Töreni</h5>
<p class="mb-4">222 Haziran 2023
Yüksekokulumuzdan Ayrılan Öğr. Gör. Ünal KAYA Hocamıza Veda Töreni
Haberler
</p>
<a href="#" class="btn btn-secondary rounded-pill text-white py-2 px-4 mb-2">Daha Fazla</a>
</div>
</div>
</div>
</div>

</div>