CODEWITHSUNDEEP
javascripthtmlcss
jenny
jenny

Reputation: 277

resize the width of the div based on sibling div availability

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?

Upvotes: 1

Views: 116

Answers (2)

TazTheManiac
TazTheManiac

Reputation: 402

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>

Upvotes: 2

mcgraphix
mcgraphix

Reputation: 2733

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%
}

Upvotes: 2

Related Questions