In the below snippet I have 6 cells in 2 rows, but I need to merge cell number "2" and "5".
If doing it as a CSS Table DIV I know this can be done, but I like to do this the "Bootstrap way" (if any such exist), but have not been able find any documentation that I was able to get to work.
Anyone who knows how this can be done?
The DIV: (Note that the snippet needs to be seen in expanded view for the cells to display the right way)
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100" style="text-align: center">
<h1>1</h1>
</div>
</div>
<div class="col">
<div class="card h-100" style="text-align: center">
<h1>2</h1>
</div>
</div>
<div class="col">
<div class="card h-100" style="text-align: center">
<h1>3</h1>
</div>
</div>
<div class="col">
<div class="card h-100" style="text-align: center">
<h1>4</h1>
</div>
</div>
<div class="col">
<div class="card h-100" style="text-align: center">
<h1>5</h1>
</div>
</div>
<div class="col">
<div class="card h-100" style="text-align: center">
<h1>6</h1>
</div>
</div>
</div>You can use nesting like this...
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="row">
<div class="col-12">
<div class="card h-100 border" style="text-align: center">
<h1>1</h1>
</div>
</div>
<div class="col-12">
<div class="card h-100 border" style="text-align: center">
<h1>4</h1>
</div>
</div>
</div>
</div>
<div class="col">
<div class="row h-100 ">
<div class="col-12">
<div class="card h-100 border" style="text-align: center">
<h1>2 + 5</h1>
</div>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col-12">
<div class="card h-100 border" style="text-align: center">
<h1>3</h1>
</div>
</div>
<div class="col-12">
<div class="card h-100 border" style="text-align: center">
<h1>6</h1>
</div>
</div>
</div>
</div>
</div>