title: Bootstrap grid with search filter & dynamic layout
body: <p>Been working on a layout grid with cards with Bootstrap 4 for a calendar project, and after the original briefing it has been request that I need to add a search bar with a dynamic layout - one that reshuffles the card items after the search.</p>
  <p>So far managed to complete the first part via JS - <a href="https://www.w3schools.com/bootstrap/bootstrap_filters.asp" rel="nofollow noreferrer">submit an input with filter for every grid item</a> - however they don't automatically shuffle back after the search, leaving up empty spaces between the results. Here's the code:</p>
  <pre><code>&lt;div id=&quot;pesquisa&quot;&gt;
      &lt;div class=&quot;container&quot; &gt;
          &lt;div class=&quot;row&quot;&gt;
              &lt;h2 class=&quot;text-center&quot;&gt;Descubra as melhores corridas de rua do país&lt;/h2&gt;
              &lt;input class=&quot;form-control&quot; id=&quot;myInput&quot; type=&quot;text&quot; placeholder=&quot;Procure pela sua distância!&quot;&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id=&quot;eventos&quot; ... /* inside this div is the whole code for the calendar */&gt; 
  &lt;/div&gt;
  
  &lt;script&gt;
      $(document).ready(function(){
        $(&quot;#myInput&quot;).on(&quot;keyup&quot;, function() {
          var value = $(this).val().toLowerCase();
          $(&quot;#eventos .card&quot;).filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) &gt; -1)
          });
        });
      });
  &lt;/script&gt;
  </code></pre>
  <p>..</p>
  <p>Any tip for fixing this - even if it's another JS script and how to implement it - would help.</p>
  <p>Thanks in advance and have a blessed day!</p>