Why button is overlapping with images in css?

Question

I wish to make a table(in 2nd col-6) with buttons at top and than changing content(scrollable cards) below it based on button click. I tried to implement it but my cards and buttons overlap how to tackle this and overlapping makes buttons non reactive.

<div class="Container">
   <div class="row">
      <div class="col-md-6 ">
         <div > this is the table</div>
      </div>
      <div class="col-md-6 ">
         <div class="container">
            <div >
               <div v-for="(eachbutton, index) in getbuttons" :key="index" style="color:#ffff">
                  <button class="tablink" style="margin-bottom:12px" @click="changeList(eachWidget.displayTitle)" id="defaultOpen">{{eachbutton.displayTitle}}</button>
               </div>
            </div>
            <div v-for="(each, index) in getCarddata" :key="index" style="color:#ffff">
               <div class="col-md-4 col-12 " style="width: 200px; height:90px margin-top: 90px">
                  <div class="card mb-6" style="background-color: #050b06;">
                     <div class="row g-0  ">
                        <div class="col-md-6 col-6 w-100 h-100">
                           <img class="w-100 h-100" style="margin:11px" :src="each.ImageUrl" alt="..." />
                        </div>
                        <div class="col-md-6 col-6">
                           <p class="card-text text-episode" style="text-align: left; color:#fff;">
                              <small class="text-muted">  card</small>
                           </p>
                           <p class="card-text text-start" style="text-align: left;">
                              <small class="text-muted">text</small
                                 >
                           </p>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

Answer 1

I hope you are using bootstrap 4 or higher, Try this

<div class="Container">
   <div class="row">
      <div class="col-md-6 ">
         <div > this is the table</div>
      </div>
      <div class="col-md-6 ">
         <div class="row">
            <div class="col-md-12">
               <div v-for="(eachbutton, index) in getbuttons" :key="index" style="color:#ffff">
                  <button class="tablink" style="margin-bottom:12px" @click="changeList(eachWidget.displayTitle)" id="defaultOpen">{{eachbutton.displayTitle}}</button>
               </div>
            </div>
            <div class="col-md-12">
                <div v-for="(each, index) in getCarddata" :key="index" style="color:#ffff">
                   <div class="col-md-4 col-12 " style="width: 200px; height:90px margin-top: 90px">
                      <div class="card mb-6" style="background-color: #050b06;">
                         <div class="row g-0  ">
                            <div class="col-md-6 col-6 w-100 h-100">
                               <img class="w-100 h-100" style="margin:11px" :src="each.ImageUrl" alt="..." />
                            </div>
                            <div class="col-md-6 col-6">
                               <p class="card-text text-episode" style="text-align: left; color:#fff;">
                                  <small class="text-muted">  card</small>
                               </p>
                               <p class="card-text text-start" style="text-align: left;">
                                  <small class="text-muted">text</small
                                     >
                               </p>
                            </div>
                         </div>
                      </div>
                   </div>
                </div>
            </div>
         </div>
      </div>
   </div>
</div>