overriding class styles from bootstrap,according to the HTML rendered in Devtools

Question

Im trying to override some styles from my app using bootstrap. When I access the Chrome Devtools, the HTML rendered is:


<div data-v-256a5f3d="" data-v-7bf4ea52="" class="row bg-gray-200 border-gray-300 d-flex justify-content-between align-items-center mx-1 mb-2 rounded tabs-list row-cols-2">
<div data-v-256a5f3d="" data-v-7bf4ea52="" class="overflow-x-auto col-10">
 <div data-v-f029eeb6="" data-v-256a5f3d="" class="tabs col mt-2 d-flex flex-row" data-v- 
  7bf4ea52="" id="__BVID__35">
  <div class="">
   <ul role="tablist" class="nav nav-tabs flex-nowrap hide-scrollbars  mb-0" 
   id="__BVID__35__BV_tab_controls_">
     <li role="presentation" class="nav-item">
        <a role="tab" aria-selected="false" aria- 
        setsize="15" aria-posinset="1" href="#" target="_self" class="nav-link" 
        id="__BVID__36___BV_tab_button__" aria-controls="__BVID__36" tabindex="-1">
          <div data-v-256a5f3d="" class="overflow-x-auto__title d-flex flex-row custom- 
          nav-link">
                  Def...
          </div>
        </a>
     </li>
  </ul>
 </div>
</div>
</div>

Which Eventually refers to this block of code in my app component in VUE:

<b-row
          v-if="showResultsTabs"
          cols="2"
          class="bg-gray-200 border-gray-300 d-flex justify-content-between align-items-center mx-1 mb-2 rounded tabs-list"
        >
          <b-col cols="10" class="overflow-x-auto">
            <single-line-tabs class="d-flex flex-row">
              <b-tab
                v-for="(tab, index) in tabs"
                :key="tab.name"
                :active="isTabActive(tab, index)"
                :data-full-text="tab.label"
                @click="onTabClicked(tab, index)"
              >
                <template #title>
                  <div
                    class="overflow-x-auto__title d-flex flex-row custom-nav-link"
                    @mouseover="onTabHovered(tab.label)"
                    @mouseleave="onTabLeft"
                  >
                    {{ truncateTextInTab(tab.label, 3) }}
                    <span v-if="tooltipText === tab.label" class="overflow-x-auto__tooltip">{{ tooltipText }}</span>
                  </div>
                </template>
              </b-tab>
            </single-line-tabs>
          </b-col>
</b-row>

by the way the single-line-tabs is a component that has this format:

<template>
  <b-tabs ref="tabs" class="col mt-2" :nav-class="`flex-nowrap hide-scrollbars mb-0`">
    <slot></slot>
  </b-tabs>
</template>

Then on my css scoped file in the vue component was like this:

<style lang="scss" scoped>
  ...some css
 
  .tabs .nav-tabs .nav-item .nav-link {
    border-top: 2px solid red !important;
  }. ===============>HERE TRYING TO  MODIFY THE COMPONENT ACCESSING THE BOOTSTRAP STYLE CLASS
</style>

but is not working... also have tried:

   .nav-link {
    border-top: 2px solid red !important;
  }

or

  ::v-deep {
    .nav-link  {
      border-top: 2px solid red !important;
    }
  }

but the component keeps the same

Enrique GF · Accepted Answer · 2023-10-20 07:20:27Z

0

Guess the right approach would be this one:

 ::v-deep(.nav-link) {
      border-top: 2px solid red !important;
    }

answered Oct 20, 2023 at 7:20

Enrique GF

1,2954 gold badges21 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

overriding class styles from bootstrap,according to the HTML rendered in Devtools

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related