Dynamic Bootstrap grid column size

Question

I'm using the Bootstrap grid and I have two columns:

<div class="col-md-7 no-padding">
... content 1 ...
</div>
<div class="col-md-5">
... content 2 ...
<div>

I would like to have the first column col-md-7 dynamically: if the near column col-md-5 is empty I would like to have col-md-7 as full width (col-md-12).

How can I do this dynamically?

Answer 1

You can use the selector :has(). For example, like this (I not using bootstrap, just demonstrating the idea):

.row {
  display: grid;
  grid-template-columns: 7fr 5fr;
  grid-gap: 30px;
}

.col-md-7:has(+ .col-md-5:empty) {
    grid-column: span 2;
}

.col-md-7,
.col-md-5 {
  padding: 15px;
  border: solid 1px #ccc;
}

.col-md-5:empty {
  display: none;
}

<div class="row">
  <div class="col-md-7">
    ... content 1 ...
  </div>
  <div class="col-md-5">
    ... content 2 ...
  </div>
  <div class="col-md-7">
    ... content 3 ...
  </div>
  <div class="col-md-5"></div>
</div>