How can I hide empty grid columns?

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?

Answers


It is possible. This is especially useful in CMS systems like dotnetnuke where you don't always know if there will be any content in columns because users add their content in columns.

$( document ).ready(function(){
    if ($('.sideBar').is(':empty')) {
        $('.sideBar').remove()
        $('.myContent').removeClass('col-md-9').addClass('col-md-12');
    }
});

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 sideBar">menu</div>
    <div class="col-md-9 myContent"></div>
</div>

You could fully automate this, here is start, anyone likes to continue for me? :)

$( document ).ready(function(){
  $('.row').each(function() {
    var row = $(this);    
    row.children().each(function () {
      var col = $(this);
      if col.is(':empty')
      {
        col.remove();
       /*TODO: we need to first count all empty cols, then divide those among non empty cols by changing their style*/
      }
    });
  });
});

Normally you'd use PHP (or your particular server-side language) logic to apply the appropriate Bootstrap classes depending on whether there's content in the column or not. This probably shouldn't be done with CSS.


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>

I recommend using the same logic you applied the css styles to add bootstrap css classes such as "col-md-6". Like any styles, bootstrap styles can be added or removed on demand.


Need Your Help

Huge amount of JAR files in jboss/server/web/tmp/vfs-nested.tmp directory

jboss jboss5.x

Sometimes we have huge amount of JAR files in jboss/server/web/tmp/vfs-nested.tmp directory.

Get the finance stocks key development links from Reuters

android yql stocks yahoo-finance reuters

I am developing an android application which gives stock information using YQL. In the Yahoo interactive charts there are key developments as shown in the link: http://finance.yahoo.com/echarts?s=...