How can I make the Bootstrap cards in <ul> overide the <ul> bootstrap designs so its displayed like a grid

Question

I am using Bootstrap and I made a search bar which makes results that don't match the entered text disappear. I have done that, But I am trying to make it so its like a grid layout, but the same system.

Heres my code: html

<!-- Search Bar and articles -->
  <section id="searchHub" class="mt-3">
    <div class="py-5 text-center" style="background-image:url('/Assets/Images/Placeholders/ImageGrey.jpeg'); width: 100%;">
        <h1 class="ms-3 my-4 text-light">Search Articles</h1>

    <input class="px-5 py-2 rounded-pill" id="searchbar" onkeyup="search_article()" type="text"
        name="search" placeholder="Search articles..">
    </div>
  </section>
  <section id="main" class="sgap">
        
    <ul>
        <div class="row mx-2 container-lg text-center" id='list'>
            <li class="articles">
            <div class="col-3">
                <div class="card">
                    <div class="card-body">
                    <h5 class="card-title">Dogs</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary card-link">Start Learning Dogs!</a>
                    </div>
                </div>
            </div> </li>
            <li class="articles">
                <div class="col-3">
                    <div class="card">
                        <div class="card-body">
                        <h5 class="card-title">Donkeys</h5>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary card-link">Start Learning Donkeys!</a>
                        </div>
                    </div>
                </div> </li>
                <li class="articles">
                    <div class="col-3">
                        <div class="card">
                            <div class="card-body">
                            <h5 class="card-title">Cats</h5>
                            <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                            <p class="card-text">Fluffy fury pets</p>
                            <a href="#" class="btn btn-primary card-link">Start Learning Cats!</a>
                            </div>
                        </div>
                    </div> </li>
                    <li class="articles">
                        <div class="col-3">
                            <div class="articles card">
                                <div class="card-body">
                                <h5 class="card-title">Elephant</h5>
                                <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                <a href="#" class="btn btn-primary card-link">Start Learning Elephants!</a>
                                </div>
                            </div>
                        </div> </li>
        </ul>
    </div>
  </section>

Javascript: (btw copied from another site; but I tinkered with it)

// JavaScript code
function search_article() {
    let input = document.getElementById('searchbar').value
    input=input.toLowerCase();
    let x = document.getElementsByClassName('articles');
    
    for (i = 0; i < x.length; i++) {
        if (!x[i].innerHTML.toLowerCase().includes(input)) {
            x[i].style.display="none";
        }
        else {
            x[i].style.display="list-item";             
        }
    }
}

Extra CSS:

@import url('https://fonts.googleapis.com/css2?family=Rowdies&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

section.sgap{
  padding-top: 60px;
}

h1{
  font-family: 'Rowdies', cursive;
}

h2{
  font-family: 'Rowdies', cursive;
}

.font{
  font-family: 'Rowdies', cursive;
}

section#searchHub ul{
  list-style: none;
}

section#searchHub li{
  float:left;
}

• Bootstrap Designs

Heres my output:

Heres what I want to happen:

Thanks!