<div class="container mt-2">
  <div class="row">
<div class="col-10 p-2 bg-secondary rounded">
<div class="row mt-2"><div class="col-md-4">
          <label>Ширина(мм.)</label>
          <input type="number" class="form-control" placeholder="мм." name="width" value="" min="1">
</div>
<div class="col-md-4">
          <label>Длина(мм.)</label>
          <input type="number" class="form-control" placeholder="мм." name="length" value="" min="1">
</div>
<div class="col-md-4">
          <label>Количество</label>
          <input type="number" class="form-control" placeholder="Количество" name="count" value="1" min="1">
</div></div><div class="row">
<div class="col-md-8 mt-3">
  <label>Примерная стоимость $</label>
          <p class="form-control" name="result"><span id ="total" >0</span></p>
</div>
  <div class="col-md-4 mt-3">
          <label>Цена $ за мм<sup>2</sup></label>
          <input type="number" class="form-control" placeholder="Количество" name="price" value="2" min="1">
</div>
  
</div>
  <button onclick="clearInputs()" type="button" class="btn btn-sm btn-secondary"><svg width="16" height="16" viewBox="0 0 16 16">
  <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"></path>
</svg> Очистить </button>
</div>
  
</div></div>
:root{
      --bs-secondary-rgb: 217,217,217;
}
button > svg{
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    fill: currentcolor;
}
const total  = document.getElementById('total'),
      price  = document.getElementById('price'),
      inputs = [...document.querySelectorAll('input.form-control')],
      clearInputs = () => { inputs.map((n,i) => n.value = n.name != 'price' ? 0 : n.value), total.innerText = 0;};
inputs.forEach(input => { 
  input.addEventListener('input', () => { 
    total.innerText = inputs.reduce((acc, input) => { 
        return acc * Number(input.value == '' ? 0 : input.value); 
      }, 1); 
   }); 
  });

     

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js