I am attempting to customize the styles of my application using bootstrap. Upon inspecting the HTML in Chrome Devtools, I found the following rendered code:
<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">
...
This section references a specific block of code within my Vue app component:
<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-row>
Furthermore, there is a component called "single-line-tabs" that follows this format:
<template>
<b-tabs ref="tabs" class="col mt-2" :nav-class="`flex-nowrap hide-scrollbars mb-0`">
<slot></slot>
</b-tabs>
</template>
The CSS styling within the scoped style tags attempts to modify the component by accessing the Bootstrap classes but does not seem to work:
<style lang="scss" scoped>
...some css
.tabs .nav-tabs .nav-item .nav-link {
border-top: 2px solid red !important;
}
</style>
Various other methods have been tried such as targeting the ".nav-link" class directly or using pseudo-elements like ::v-deep, but the component does not reflect the changes.