How to combine Isotope plugin and bootstrap?

Question

JavaScript

Hello, how to make friends between the Isotope plugin and bootstrap.
Namely,
there are buttons: All, Auto, Cooking.

Example

Below the buttons are col-lg-3 blocks, some are about cooking and some are about Auto.
Tried but I have something somehow all through the ass. Filter then filters but bootstrap doesn't work.

Tyk

<section class="catalog">
    <div class="container">
      <div class="row">
        <div class="button-group filter-button-group">
          <button data-filter="*">Все</button>
          <button data-filter=".item-g">Авто</button>
          <button data-filter=".item-t">Кулинария</button>
        </div>
        <div class="grid-catalog">

          <div class="col-lg-3 item-catalog item-g">
            Авто - 1
          </div>

          <div class="col-lg-3 item-catalog item-t">
            Кулинария - 1
          </div>

          <div class="col-lg-3 item-catalog item-g">
            Авто - 2
          </div>

          <div class="col-lg-3 item-catalog item-t">
            Кулинария - 2
          </div>

        </div>
      </div>
    </div>
  </section>

js code

$( document ).ready(function() {
    
  // init Isotope
  var $grid = $('.grid-catalog').isotope({
    // options
  });
  // filter items on button click
  $('.filter-button-group').on( 'click', 'button', function() {
    var filterValue = $(this).attr('data-filter');
    $grid.isotope({ filter: filterValue });
  });

});

Answer 1

https://isotope.metafizzy.co/extras.html#bootstrap