I want to align my elements on my site like on the picture I attached.
I want to achieve something like you can do with col and row-span with tables in HTML.
I'm using bootstrap 4.
I tried to make it in the same row but it won't fit in the 12 cols that bootstrap allows, also it can't fit because of the carousel.
I'm a beginner and I can't find the solution.
Thanks for the help.
Images:
HTML Code:
<div class="container-fluid">
<div class="row"> <!-- Welcome text -->
<div class="col-lg-12">
<p class="h1 text-center p-2">Üdvözöljük Városunk weboldalán!</p>
</div>
</div>
<div class="row"> <!--First row-->
<div class="col-lg-6 col-md-12 p-1"> <!-- Slider -->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block " src="public/IMG/center/kozpont_1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block " src="public/IMG/strand/strand_1.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block " src="public/IMG/strand/strand_3.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Előző</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Következő</span>
</a>
</div>
</div>
<div class="col-lg-2 col-md-4 p-1"> <!-- Turizmus -->
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Turizmus</h5>
<ul class="list-group ">
<li><a href="#" class="card-link">Eseménynaptár</a></li>
<li><a href="#" class="card-link">Elhelyezkedés</a></li>
<li><a href="#" class="card-link">Látnivalók, nevezetességek</a></li>
<li><a href="#" class="card-link">Strandfürdő</a></li>
<li><a href="#" class="card-link">Szálláshelyek</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 p-1"> <!-- Gyorslinkek -->
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Gyorslinkek</h5>
<ul class="list-group ">
<li><a href="#" class="card-link">A Polgármesteri Hivatal ügyfélfogadása</a></li>
<li><a href="#" class="card-link">Rendelettár</a></li>
<li><a href="#" class="card-link">Képviselő-testület</a></li>
<li><a href="#" class="card-link">A Jász-Nagykun-Szolnok Megyei Kormányhivatal Járási Hivatala</a></li>
<li><a href="#" class="card-link">Háziorvosok, fogorvosok rendelési ideje</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 p-1"> <!-- Hírdetmények -->
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Hirdetmények</h5>
<ul class="list-group ">
<li><a href="#" class="card-link">Térfigyelő rendszer</a></li>
<li><a href="#" class="card-link">WIFI pontok</a></li>
<li><a href="#" class="card-link">Beruházások</a></li>
<li><a href="#" class="card-link">Pályázatok</a></li>
<li><a href="#" class="card-link">Közérdekű információk</a></li>
</ul>
</div>
</div>
</div>
</div> <!-- End of first row-->
<div class="row"><!--Second row-->
<div class="col-lg-2 col-md-4 p-1"> <!-- Hírdetmények -->
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Hirdetmények</h5>
<ul class="list-group ">
<li><a href="#" class="card-link">Térfigyelő rendszer</a></li>
<li><a href="#" class="card-link">WIFI pontok</a></li>
<li><a href="#" class="card-link">Beruházások</a></li>
<li><a href="#" class="card-link">Pályázatok</a></li>
<li><a href="#" class="card-link">Közérdekű információk</a></li>
</ul>
</div>
</div>
</div>
</div><!-- End of second row-->