How can I hide empty grid columns?

Question

I'm using bootstrap to make a responsive template for a CMS. I want to have a three column grid in the main area, but sometimes, there isn't content in all three columns. The CMS will add a class to any column that is empty, so I can use that to hide them, but I can't get bootstrap to expand the other two columns to fill the area.

So, if I have three columns that are all col-md-4, but one is hidden, I basically want the others to become col-md-6. If two are empty, I'd want the remaining one to be col-md-12. But, I haven't had any luck.

Any ideas?

Answer 1

Since the addition of flexbox to Bootstrap 4, you can use the .col class to automatically size the column widths. Using the :empty pseudo selector (or if you wanted, a custom class like .col-empty) you can hide columns with no content.

Codepen

More about Bootstrap Column Layout
Also, Empty Pseudo Selector - must be empty element!

.row { margin: 25px 0; }
.col1 { background-color: red; }
.col2 { background-color: lightgreen; }
.col3 { background-color: gold; }

/* ways of hiding the column if no content */
.col-empty, .col:empty, [class^=col-]:empty { display: none; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col col1">ONE</div>
    <div class="col col2">TWO</div>
    <div class="col col3">THREE</div>
  </div>
  
  <div class="row">
    <div class="col col1">ONE</div>
    <div class="col col2"></div>
    <div class="col col3">THREE</div>
  </div> 
  
    
  <div class="row">
    <div class="col col1"></div>
    <div class="col col2"></div>
    <div class="col col3">THREE</div>
  </div> 
</div>