How can I merge 2 DIV table rows in Bootstrap 5

Question

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>

score 2 · Accepted Answer · answered Jul 14 '21 at 19:14

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>

https://codeply.com/p/6we5uiXzxl

focus.style · Answer 2 · 2021-07-06T05:38:02.167

Unfortunately, there is no clean way to resolve this using only Bootstrap 5 methods. You could make it work using table, as you wrote above. Or here is some mixed Bootstrap 5 + display grid way.

Here we are using d-grid - new BS5 class, and gap-2 as grid gap BS5 support. For now the d-grid is poorly described in Bootstrap 5 documentation, the only example of d-grid from BS5 docs.

Note that custuom-grid and custuom-grid-cell are totally custom classes and doesn't belong to BS5.

Also can be usefull: grid-template-columns and grid-area manual. Used them in the example below.

.custuom-grid {
  grid-template-columns: 1fr 1fr 1fr;
}
.custuom-grid-cell:nth-child(2) {
  grid-area: 1 / 2 / 3 / 3;
}

<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="d-grid gap-2 custuom-grid">
  <div class="custuom-grid-cell">
    <div class="card h-100 text-center">
      <h1>1</h1>
    </div>
  </div>
  <div class="custuom-grid-cell">
    <div class="card h-100 text-center">
      <h1>2</h1>
    </div>
  </div>
  <div class="custuom-grid-cell">
    <div class="card h-100 text-center">
      <h1>3</h1>
    </div>
  </div>
  <div class="custuom-grid-cell">
    <div class="card h-100 text-center">
      <h1>4</h1>
    </div>
  </div>
  <div class="custuom-grid-cell">
    <div class="card h-100 text-center">
      <h1>6</h1>
    </div>
  </div>
</div>

How can I merge 2 DIV table rows in Bootstrap 5

2 Answers2