Стиль Bootstrap 4 изменяет стиль дат gui

Question

На странице html

<!-- Start of wrapping -->
  <div class="wrapper">
    <!-- Start top-navbar -->
    <nav id="top-navbar" class="navbar navbar-expand-lg navbar-transparent">
      <!-- Start show sidebar -->
      <button type="button" id="showSidebar" class="btn btn-info">
        <i class="fas fa-align-left"></i>
      </button>
      <!-- End show sidebar -->
    </nav>
    <!-- End top-navbar -->
    <!-- Start of sidebar -->
    <div id="sidebar" class=""></div>
    <!-- End of sidebar -->
    <div id="renderer-output"></div>
  </div>
  <!-- End of wrapping -->

с этим стилем

html, body {
  width: 100vw;
  height: 100vh;
  background-color: red;
}

#top-navbar {
  z-index: 9999;
}

.dg.ac {
  z-index: 999999;
}

#sidebar {
  position: fixed;
  left: -250px;
  top: 0;
  width: 250px;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 99999;
}

#sidebar.active {
  left: 0;
}

#renderer-output {
  position: fixed;
  left: 5%;
  top: 5%;
  width: 90vw;
  height: 90vh;
  background-color: #000000;
}

У меня есть простой dat gui

var config = new function () {
    this.color = "#ff0000";
};

gui = new dat.GUI({ });
var colorController = gui.addColor(config, 'color');
colorController.onChange(function (color) {
    document.body.style.backgroundColor = color;
});

Когда я пытаюсь стиль моих кнопок с помощью Bootstrap 4 с использованием

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

стиль dat- gui изменен, и элементы управления имеют проблемы, такие как addControl.

Я сделал короткий код, где вы можете увидеть это. Попробуйте прокомментировать / раскомментировать стиль Bootstrap. https://codepen.io/rvcristiand/pen/BaNewgX

Есть ли способ сохранить стиль данных gui?