Q:

Bootstrap 4 Columns, 2 Hidden

I am creating a bootstrap page that will have a 4 column grid system. However, 2 of these will be hidden columns. One to the left and one to the right. When a user clicks a toggle button on the left, the user can see 3 columns, like wise, clicking a toggle button to the right will display the 4 columns. 
How can I do this using in bootstrap grid?

A:

The concept here is that on .click() I do the following:

I remove all col-lg-* classes based on how many .hidden columns exist.
I toggle the .hidden class for the first or last column.
I add the correct col-lg-* class depending again on how many .hidden columns exist.

HTML
<p>
    <button class="btn btn-info toggle-item toggle-first">Toggle first column</button>
    <button class="btn btn-info toggle-item toggle-last">Toggle last column</button>
</p>
<div class="row">
    <div class="first column hidden">
        first column
    </div>
    <div class="column col-lg-6">
        second column  
    </div>
    <div class="column col-lg-6">
        third column
    </div>
    <div class="last column hidden">
        fourth column
    </div>
</div>

JavaScript
jQuery('.toggle-item').click(function() {
    var count = jQuery('.column.hidden').length;
    if (count === 2) {
        jQuery('.column').removeClass('col-lg-6');
    } else if (count === 1) {
        jQuery('.column').removeClass('col-lg-4');
    } else if (count === 0) {
        jQuery('.column').removeClass('col-lg-3');
    }

    if (jQuery(this).hasClass('toggle-first')) {
        jQuery('.column.first').toggleClass('hidden');
    } else {
        jQuery('.column.last').toggleClass('hidden');
    }

    count = jQuery('.column.hidden').length;
    if (count === 2) {
        jQuery('.column').addClass('col-lg-6');
    } else if (count === 1) {
        jQuery('.column').addClass('col-lg-4');
    } else if (count === 0) {
        jQuery('.column').addClass('col-lg-3');
    }
});

Here is a demo

