<div class="row mb-2">

                <label for="name" class="col-lg-3 col-form-label">

                  Name

                </label>

                <div class="col-lg-9">

                  <div class="d-flex validity-bridge">

                    <div class="w-100">

                      <input type="text" name="name" value="" id="name" class="form-control is-invalid">

                    </div>

                    <span class="text-danger ms-1">*</span>

                    <div class="invalid-feedback w-25 mt-2">Must be filled in</div>

                  </div>

                </div>

              </div>

​

<div class="row mb-2">

                <label for="operatingSystem" class="col-lg-3 col-form-label">

                  Operating System

                </label>

                <div class="col-lg-9">

                  <div class="d-flex validity-bridge">

                    <div class="w-100">

                      <select name="operatingSystem" id="operatingSystem" class="form-control is-invalid" data-mdb-select-init="">

    <option value=""></option>

    <option value="0">WINDOWS</option>

    <option value="1">UNIX</option>

    <option value="2">LINUX</option>

    <option value="3">z/OS</option>

</select>

​

​

                    </div>

                    <span class="text-danger ms-1">*</span>

                    <div class="invalid-feedback w-25 mt-2">Must be filled in</div>

                  </div>

                </div>

              </div>

.validity-bridge:has(.is-invalid)>.invalid-feedback {

  display: block;

  position: relative;

}

document.querySelectorAll("div.select-wrapper").forEach((wrapper) => {

    const originalSelect = wrapper.querySelector("select.select-initialized");

    const newSelect = wrapper.querySelector("input.select-input");

    if(originalSelect && newSelect && originalSelect.classList.contains("is-invalid")){

      newSelect.classList.add("is-invalid");

    }

  });