'Javascript and bootstrap won't work together

I have a product list, I made a js file which ads filter buttons and a search bar which works well but when I put it in my html file it stops working because of the Bootstrap link. When I remove bootstrap 5.1.4 link code<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> then js content works well (but i lose my bootstrap designs). Basically both won't work when on the same page i don't understant why.

my code : https://jsfiddle.net/q69b1c0y/2/

html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <title>L'Arbre à Pains - Catalogue</title>
 
        <link rel="stylesheet" type="text/css" href="styleBridor.css">
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"rel="stylesheet"
    />
    </head>
    <body>

        <style>
body {
  background-color: #ffffff;
}
</style>
<div class="topnav">
  <a class="active" href="Catalogue LAB.html#home">Home</a>
  <a href="Catalogue LAB.html#newsletter">S'abonner</a>
</div>

 <div class="wrapper">
      <div id="search-container">
        <input
          type="search"
          id="search-input"
          placeholder="Search product name here.."
        />
        <button id="search">Search</button>
      </div>
      <div id="buttons">
        <button class="button-value" onclick="filterProduct('tous')">Tous</button>
        <button class="button-value" onclick="filterProduct('Viennoiseries')">
          Viennoiseries
        </button>
        <button class="button-value" onclick="filterProduct('MiniViennoiseries')">
          MiniViennoiseries
        </button>
        <button class="button-value" onclick="filterProduct('PetitsPains')"> 
          PetitsPains
        </button>
        <button class="button-value" onclick="filterProduct('PausesSucrées')">
          PausesSucrées
        </button>
      </div>
      <div id="products"></div>
    </div>

   <section class="section-products">
        <div class="container">
                <div class="row justify-content-center text-center">
                        <div class="col-md-8 col-lg-6">
                                <div class="header">
                                        <h2>Gamme Bridor</h2> 
                                        <img class="logo-bridor" src="https://en.groupeleduff.com/app/uploads/2015/05/Logo-Bridor-2019.jpg" alt="..." /> 
                                        <img class="logo-LAP" src="https://larbreapains.fr/logo1.png" alt="..." /> 
                                        <a name="grande"></a>
                                        <h3>Les Grandes Viennoiseries</h3>
                                </div>
                        </div>
                </div>  
                <div class="row">
        <!-- Single Product -->
                <div class="col-md-6 col-lg-4 col-xl-3">
                        <div id="product-1" class="single-product"> 
                                <div class="part-1">
                                </div>
                                <div class="part-2">
                                        <h3 class="product-title">Pain au chocolat</h3>
                                        <h4 class="product-price"><i><strong>2 barres au beurre Charentes Poitou AOP - cru surgelé</strong><br><strong>BRIDOR - ELAT DU TERROIR</strong></i><br></h4>
                                        <h5 class="description"><strong>Référence:</strong> B 31691 <br>
                                                        <strong>Précuit:</strong> 80g <br>
                                                        <strong>Cuit:</strong> 69g <br>
                                                        <strong>Conditionnement:</strong> 150 pièces/carton<br>
                                                        <strong>Préparation:</strong> Mise en plaque (600x400) 9 unités par plaque. <br>Fermentation - en direct : 2H - 2H15 à 28°C, humidité 80% - en pousse différé : blocage au froid 0/+2°C jusque 12h. 1h30 - 1h45 à 28°C, humidité 80%. Repos 20 min. <br> Dorage: Dorer à l'Œuf entier. Cuisson - Four ventilé: environ 16 à 18 min. à 165/170°C, ou ra ouvert. Four rotatif: baisser de 10°C - Four à sole: environ 20 à 22 min. à 195-200°C (sole + voûte). Plaque acier de préférence, sinon doubler les plaques.</h5>

css :

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&family=Beau+Rivage&family=Bilbo&family=Mr+De+Haviland&family=Roboto+Slab&family=Tangerine&display=swap');

body {
    font-family: "Poppins", sans-serif;
    color: #444444;
}

/* Add a black background color to the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #e9e9e9;
}   

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the "active" element to highlight the current page */
.topnav a.active {
  background-color: #2196F3;
  color: white;
}

/* Style the search box inside the navigation bar */
.topnav input[type=text] {
  float: right;
  padding: 6px;
  border: none;
  margin-top: 8px;
  margin-right: 16px;
  font-size: 17px;
}

/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
@media screen and (max-width: 600px) {
  .topnav a, .topnav input[type=text] {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;
  }
}

a,
a:hover {
    text-decoration: none;
    color: inherit;
}

.section-products {
    padding: 80px 0 54px;
}

.section-products .header {
    margin-bottom: 50px;
}
  
.section-products .header h3 {
    font-size: 70px;
    color: #fe302f;
    font-weight: 500;
    font-family: "Amatic SC";
}

.section-products .header h2 {
    font-size: 60px;
    font-weight: 400;
    color: #444444;
    font-family: "Amatic SC"; 
}

.margin-top {
  margin-top: 110px;
  margin-bottom: -80px;
}

.section-products .single-product {
    margin-bottom: -50px;
}

.section-products .single-product .part-1 {
    position: relative;
    height: 290px;
    max-height: 290px;
    margin-bottom: 20px;
    overflow: hidden;
}

.section-products .single-product .part-1::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;

}

.section-products #product-1 .part-1::before {
    background: url("https://i.goopics.net/swnwup.png") no-repeat center;
    background-size: contain;
    transition: all 0.3s;
    width: 88%;
    margin-left: -0px;
    margin-top: 50px;
}
.section-products .single-product .part-2 .product-old-price::after {
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #444444;
    transform: translateY(-50%);
}

.description {
  color: #1E1E1E;
  font-size: 13px;
}

.conditionnement {
  margin-top: 120px;
  margin-bottom: -50px;
  color: #1E1E1E;
  font-size: 16px;
}

.conditionnement2 {
  margin-top: 120px;
  margin-bottom: -50px;
  color: #1E1E1E;
  font-size: 16px;
  margin-top: 40px;
}

.logo-bridor {
  width: 18%;
  margin-right: -150px;
  float: right;
  margin-top: -80px;
}

.logo-LAP {
  width: 20%;
  margin-left: -150px;
  float: left;
  margin-top: -80px;
}

.product-2 {
    border: 1px solid black;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border: none;
  outline: none;
  font-family: "Poppins", sans-serif;
}
body {
  background-color: #f5f8ff;
}
.wrapper {
  width: 95%;
  margin: 0 auto;
}
#search-container {
  margin: 1em 0;
}
#search-container input {
  background-color: transparent;
  width: 40%;
  border-bottom: 2px solid #110f29;
  padding: 1em 0.3em;
}
#search-container input:focus {
  border-bottom-color: #6759ff;
}
#search-container button {
  padding: 1em 2em;
  margin-left: 1em;
  background-color: #6759ff;
  color: #ffffff;
  border-radius: 5px;
  margin-top: 0.5em;
}
.button-value {
  border: 2px solid #6759ff;
  padding: 1em 2.2em;
  border-radius: 3em;
  background-color: transparent;
  color: #6759ff;
  cursor: pointer;
}
.active {
  background-color: #6759ff;
  color: #ffffff;
}
#products {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-column-gap: 1.5em;
  padding: 2em 0;
}
.card {
  background-color: #ffffff;
  max-width: 18em;
  margin-top: 1em;
  padding: 1em;
  border-radius: 5px;
  box-shadow: 1em 2em 2.5em rgba(1, 2, 68, 0.08);
}
.image-container {
  text-align: center;
}
img {
  max-width: 100%;
  object-fit: contain;
  height: 15em;
}
.container {
  padding-top: 1em;
  color: #110f29;
}
.container h5 {
  font-weight: 500;
}
.hide {
  display: none;
}
@media screen and (max-width: 720px) {
  img {
    max-width: 100%;
    object-fit: contain;
    height: 10em;
  }
  .card {
    max-width: 10em;
    margin-top: 1em;
  }
  #products {
    grid-template-columns: auto auto;
    grid-column-gap: 1em;
  }
}

Javascript:

let products = {
  data: [
    {
      productName: "Pain au chocolat",
      category: "Viennoiseries",
      price: "30",
      image: "https://i.goopics.net/swnwup.png",
    },
  ],
};

for (let i of products.data) {
  //Create Card
  let card = document.createElement("div");
  //Card should have category and should stay hidden initially
  card.classList.add("card", i.category, "hide");
  //image div
  let imgContainer = document.createElement("div");
  imgContainer.classList.add("image-container");
  //img tag
  let image = document.createElement("img");
  image.setAttribute("src", i.image);
  imgContainer.appendChild(image);
  card.appendChild(imgContainer);
  //container
  let container = document.createElement("div");
  container.classList.add("container");
  //product name
  let name = document.createElement("h5");
  name.classList.add("product-name");
  name.innerText = i.productName.toUpperCase();
  container.appendChild(name);
  //price
  let price = document.createElement("h6");
  price.innerText = "$" + i.price;
  container.appendChild(price);

  card.appendChild(container);
  document.getElementById("products").appendChild(card);
}

//parameter passed from button (Parameter same as category)
function filterProduct(value) {
  //Button class code
  let buttons = document.querySelectorAll(".button-value");
  buttons.forEach((button) => {
    //check if value equals innerText
    if (value.toUpperCase() == button.innerText.toUpperCase()) {
      button.classList.add("active");
    } else {
      button.classList.remove("active");
    }
  });

  //select all cards
  let elements = document.querySelectorAll(".card");
  //loop through all cards
  elements.forEach((element) => {
    //display all cards on 'all' button click
    if (value == "tous") {
      element.classList.remove("hide");
    } else {
      //Check if element contains category class
      if (element.classList.contains(value)) {
        //display element based on category
        element.classList.remove("hide");
      } else {
        //hide other elements
        element.classList.add("hide");
      }
    }
  });
}

//Search button click
document.getElementById("search").addEventListener("click", () => {
  //initializations
  let searchInput = document.getElementById("search-input").value;
  let elements = document.querySelectorAll(".product-name");
  let cards = document.querySelectorAll(".card");

  //loop through all elements
  elements.forEach((element, index) => {
    //check if text includes the search value
    if (element.innerText.includes(searchInput.toUpperCase())) {
      //display matching card
      cards[index].classList.remove("hide");
    } else {
      //hide others
      cards[index].classList.add("hide");
    }
  });
});

//Initially display all products
window.onload = () => {
  filterProduct("tous");
};

Solution 1:^[1]

Change your Bootstrap from <link...> to <script src=...></script>. Link relates to the CSS styling but you need the JS scripts portion of it as well.

See: What's the difference between using link and script tag to reference JavaScript source?

Only one of your filters seems to be set up but it does work with the change.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	AStombaugh

'Javascript and bootstrap won't work together

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]