How to select a Bootstrap class in JavaScript in order to perform style changes on it

Question

I am trying to access a Bootstrap card element so that I can hide its display when I use a search function. Currently I access the element inside the card in my to hide that when I collapse the cards when I do my filter search.

The problem with that is that there is a lot of white space that gets gets created from the Bootstrap element which increases as you select the cards closer to the bottom. The pictures below depict the problem. I will show you my unsuccessful solutions below too.

Here is what the page looks like uncollapsed:

Here is what the page looks like collapsed:

This is my HTML code for the section:

<div class="container pt-3 pb-3">
    <div class="form-outline" id="customer-search-bar">
        <input type="search" id="filter" class="form-control" placeholder="Search" aria-label="Search" >
    </div>
    <div class="card-lists">
       <div class="row">
          {% for data in raw.CustomerDataEntries %}
          <div class="card col-sm-12 mb-3" id="card-perim">
             <div class="card-body">
                <h5 class="card-title">Customer ID: {{ data.ExternalId }}</h5>
                <h5 class="card-title">Forename: {{ data.Fields.forename }}</h5>
                <h5 class="card-title">Surname: {{ data.Fields.surname }}</h5>
                <h5 class="card-title">Postcode: {{ data.Fields.post_code }}</h5>
                <h5 class="card-title">Matches: {{ data.Matches }}</h5>
                <a href="{%  url 'portal:customers_details'  data.ExternalId %}" class="tableButton">Details</a>
                <a href="{%  url 'portal:customers_edit' data.ExternalId %}"  class="tableButton">Edit</a>
             </div>
          </div>
          {% endfor %}
       </div>
    </div>
</div>

This is my JavaScript code for the section:

let filter = document.querySelector('#filter');
filter.addEventListener('keyup', () => {
  searchID();
});

function searchID() {
  const input = filter.value.toUpperCase();
  const cardContainer = document.querySelector('.card-lists');
  const cardPerim = cardContainer.querySelectorAll('.card col-sm-12 mb-13');
  // const cardPerim = cardContainer.querySelectorAll('#card-perim');
  const cards = cardContainer.querySelectorAll('.card-body');

  cards.forEach(card => {
    //this option works, but does not target bootstrap container
    card.style.display = 'none';

    //here I am trying to change the css property, this does not work
    // cardPerim.style.display = 'none';

    //here I am trying to change the display property through bootstrap class attributes, this does not work
    // cardPerim.className = "d-none card col-sm-12 mb-3";
    card.querySelectorAll(".card-body h5.card-title").forEach(title => {
      if (title.innerText.toUpperCase().indexOf(input) > -1) {
        //this option works, but does not target bootstrap container
        card.style.display = "block";

        //here I am trying to change the css property, this does not work
        // cardPerim.style.display = "block";

        //here I am trying to change the display property through bootstrap class attributes, this does not work
        // cardPerim.className = "card col-sm-12 mb-3 ";
      }
    });
  });
}

Note that I try to unsuccessfully access the Bootstrap "card col-sm-12 mb-13" through its class name and id "card-perim". I also change its display property through changing the CSS style and through changing its Bootstrap class attributes, both unsuccessful.

How can I do it?

Answer 1

For cardContainer.querySelectorAll('.card col-sm-12 mb-13'), please change to cardContainer.querySelectorAll('.card .col-sm-12 .mb-13') for the class ref.

After the change, it should work.