How to solve the conflict of Bootstrap and jQuery?

Question

If I load jQuery, the tab of bootstrap will not work, if I stop the jQuery load, it will work well. How to fix it?

<div class="container">
    <div class="row">
        <div class="col-md-8">
                            <!-- Pills navs -->
            <ul class="nav nav-pills mb-3" id="ex1" role="tablist">
              <li class="nav-item" role="presentation">
                <a
                  class="nav-link active"
                  id="ex1-tab-1"
                  data-mdb-toggle="pill"
                  href="#ex1-pills-1"
                  role="tab"
                  aria-controls="ex1-pills-1"
                  aria-selected="true"
                  >Tab 1</a
                >
              </li>
              <li class="nav-item" role="presentation">
                <a
                  class="nav-link"
                  id="ex1-tab-2"
                  data-mdb-toggle="pill"
                  href="#ex1-pills-2"
                  role="tab"
                  aria-controls="ex1-pills-2"
                  aria-selected="false"
                  >Tab 2</a
                >
              </li>
              <li class="nav-item" role="presentation">
                <a
                  class="nav-link"
                  id="ex1-tab-3"
                  data-mdb-toggle="pill"
                  href="#ex1-pills-3"
                  role="tab"
                  aria-controls="ex1-pills-3"
                  aria-selected="false"
                  >Tab 3</a
                >
              </li>
            </ul>
            <!-- Pills navs -->

            <!-- Pills content -->
            <div class="tab-content" id="ex1-content">
              <div
                class="tab-pane fade show active"
                id="ex1-pills-1"
                role="tabpanel"
                aria-labelledby="ex1-tab-1"
              >
                Tab 1 content
              </div>
              <div class="tab-pane fade" id="ex1-pills-2" role="tabpanel" aria-labelledby="ex1-tab-2">
                Tab 2 content
              </div>
              <div class="tab-pane fade" id="ex1-pills-3" role="tabpanel" aria-labelledby="ex1-tab-3">
                Tab 3 content
              </div>
            </div>
            <!-- Pills content -->
        </div>
    </div>
</div>

I have tried stop jQuery load, it can work well, if I load jQuery, the tab can't work. How to fix this problem? I want use jQuery and bootstrap at the same time.