title: grid/list toggle view with Bootstrap 4 Cards
body: <p>I want to create a grid/list view using bootstrap 4 cards. </p>
  
  <pre><code>&lt;div class="well well-sm"&gt;
      &lt;strong&gt;Display:&lt;/strong&gt;
      &lt;div class="btn-group"&gt;
          &lt;a href="#" id="list" class="btn btn-default btn-sm"&gt;&lt;span class="fas fa-list-ul"&gt;&lt;/span&gt;List&lt;/a&gt; 
          &lt;a href="#" id="grid" class="btn btn-default btn-sm"&gt;&lt;span class="fas fa-th-large"&gt;&lt;/span&gt;Grid&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>the jquery: </p>
  
  <pre><code>$('#list').click(function(event){
    event.preventDefault();
    $('.card-deck').addClass('list-group-item');
    $('.card-deck').removeClass('grid-group-item');
    $(this).addClass('active');
    $('#grid').removeClass('active');
  });
  
  $('#grid').click(function(event){
    event.preventDefault();
    $('.card-deck').removeClass('list-group-item');
    $('#list').removeClass('active');
    $(this).addClass('active');
    $('.card-deck').addClass('grid-group-item');
  
  });
  </code></pre>
  
  <p>i've got code from another post: <a href="https://stackoverflow.com/questions/49141874/bootstrap-4-card-panel-with-image-left-of-header-and-title">Bootstrap 4 card/panel with image left of header and title</a></p>
  
  <pre><code>&lt;div class="card"&gt;
      &lt;div class="row no-gutters"&gt;
          &lt;div class="col-auto"&gt;
              &lt;img src="//placehold.it/200" class="img-fluid" alt=""&gt;
          &lt;/div&gt;
          &lt;div class="col"&gt;
              &lt;div class="card-block px-2"&gt;
                  &lt;h4 class="card-title"&gt;Title&lt;/h4&gt;
                  &lt;p class="card-text"&gt;Description&lt;/p&gt;
                  &lt;a href="#" class="btn btn-primary"&gt;BUTTON&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card-footer w-100 text-muted"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>but what i want is, when clicking on grid, the view changes to a stacked card block like so:</p>
  
  <pre><code>&lt;div class="card-deck&gt;
      &lt;div class="card" style="width: 18rem;"&gt;
          &lt;img class="card-img-top" src="..." alt="Card image cap"&gt;
          &lt;div class="card-body"&gt;
              &lt;h5 class="card-title"&gt;Card title&lt;/h5&gt;
              &lt;p class="card-text"&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
              &lt;a href="#" class="btn btn-primary"&gt;Go somewhere&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>how can this be done? <strong>its important for it to work with bootstrap 4.</strong></p>
  
  <p>thanks for your help.</p>
  
  <p>Nabi</p>