根据同级div的可用性调整div的宽度

Question

I have 2 divs on a same row. When the div2 which is on right is removed I want the div1 on left to take full width.

<div class="row">
    <div class="col-sm-6" style="background-color:lavender;">Div1/div>
    <div class="col-sm-6" style="background-color:lavenderblush;">Div2</div>
  </div>

I am using bootstrap for grid and resposivity. Is there any way I could achieve it with bootstrap?

Answer 1

You could write a css selector that sets the width of col-sm-6 to be 100% it is both the first-child and last-child

.row .col-sm-6:first-child:last-child {
    width:100%
}

Answer 2

If you are using bootstrap4, then you can skip the column size declaration and instead just do.

<div class="row">
    <div class="col-sm" style="background-color:lavender;">Div1/div>
    <div class="col-sm" style="background-color:lavenderblush;">Div2</div>
</div>