<section class="hero is-info is-fullheight">
<div class="hero-body">
<div class="container has-text-centered">
  <h1 class="title">Bulma Flexbox Grid</h1>

  <div class="actions">
    <a href="#" class="remove button is-danger">Remove Column</a>
    <a href="#" class="add button is-success">Add Column</a>
  </div>

  <div class="columns">
    <div class="column">
      <div class="box">.column</div>
    </div>
    <div class="column">
      <div class="box">.column</div>
    </div>
    <div class="column">
      <div class="box">.column</div>
    </div>
    <div class="column">
      <div class="box">.column</div>
    </div>
  </div>
  
</div>
</div>
</section>
.box  {
  color: #333;
}

.actions {
  margin-bottom: 30px;
  
  a:first-child {
    margin-right: 8px;
  }
}
View Compiled
const columnsContainer = document.querySelector('.columns');
const addButton        = document.querySelector('.add');
const removeButton     = document.querySelector('.remove');

// add a column
addButton.addEventListener('click', (e) => {
  e.preventDefault();

  const newColumn = document.createElement('div');
  newColumn.classList.add('column');
  newColumn.innerHTML = `<div class="box">.column</div>`;

  columnsContainer.appendChild(newColumn);
});

// remove a column
removeButton.addEventListener('click', (e) => {
  e.preventDefault();

  const lastColumn = columnsContainer.querySelector('.column:last-child');
  lastColumn.parentElement.removeChild(lastColumn);
});
View Compiled
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.