separate tab-content to external in b-tabs

i want separate the .tab-content on <b-tabs> so inside <b-tabs> just a <b-tab> with a title
and .tab-content is outside the tags <b-tabs>

the standar from bootstrap-vue

<b-tabs content-class="mt-3">
    <b-tab title="First" active><p>I'm the first tab</p></b-tab>
    <b-tab title="Second"><p>I'm the second tab</p></b-tab>
    <b-tab title="Disabled" disabled><p>I'm a disabled tab!</p></b-tab>
</b-tabs>

the standar from bootstrap

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

so i want .tab-content separate and i can easy to customize with my template without removing the basic functionality of bootstrap-vue thanks

[Hiws]

You can simply add nav-wrapper-class="d-none" to your b-tabs, this will hide the controls and only show the content.

Then you can create your own controls somewhere else. I realise this the opposite of what you’re asking, but hope it’s enough for you to do what you’re trying to.

<b-dd text="Change tab" class="mb-3">
 <b-dd-item @click="tabIndex = 0">Page 1</b-dd-item>
 <b-dd-item @click="tabIndex = 1">Page 2</b-dd-item>
 <b-dd-item @click="tabIndex = 2">Page 3</b-dd-item>
 <b-dd-item @click="tabIndex = 3">Page 4</b-dd-item>
</b-dd>
  
<b-tabs id="myTabs" v-model="tabIndex" nav-wrapper-class="d-none">
 <b-tab>I'm the first tab</b-tab>
 <b-tab>I'm the second tab</b-tab>
 <b-tab>I'm the third tab</b-tab>
 <b-tab>I'm the fourth tab</b-tab>
</b-tabs>

<script>
new Vue({
 el: "#app",
 data: {
  tabIndex: 0
 }
});
</script>

[tmorehouse]

@Tukizz if you want URLs to change, you should use <b-nav> instead of <b-tabs>. <b-tabs> is a widget which is not intended to change the URL of the page (as there could be multiple <b-tabs> on the same page).

See https://bootstrap-vue.js.org/docs/components/nav#card-integration for examples