Newbe Dev Stack

Answer : Hard to find... but just add this: @row-clicked="item=>$set(item, '_showDetails', !item._showDetails)" Explanation The $set preserves the reactivity even if _showDetails didn't exist. It's a pitty that the row object is not accessible, so toggleDetails is not an option here. As mentioned on the row details support section of the Bootstrap Vue table documentation, you can change the _showDetails property of the row item: If the record has it's _showDetails property set to true, and a row-details scoped slot exists, a new row will be shown just below the item, with the rendered contents of the row-details scoped slot. In your case, you would want something like: expandAdditionalInfo(row) { row._showDetails = !row._showDetails; }, As demonstrated in this codepen

Answer : You can use the top-row slot to customise your own first-row. See below for a bare-bones example. new Vue({ el: '#app', data: { filters: { id: '', issuedBy: '', issuedTo: '' }, items: [{id:1234,issuedBy:'Operator',issuedTo:'abcd-efgh'},{id:5678,issuedBy:'User',issuedTo:'ijkl-mnop'}] }, computed: { filtered () { const filtered = this.items.filter(item => { return Object.keys(this.filters).every(key => String(item[key]).includes(this.filters[key])) }) return filtered.length > 0 ? filtered : [{ id: '', issuedBy: '', issuedTo: '' }] } } }) <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/><link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-...

Answer : Don't try to wrap your components with extra elements and classes, just inspect your DOM and get the rule applied to that element and change it to a custom one. i had followed that process and i get the color applied to b-nav-item-dropdown which is #ffffff80 applied to this selector .navbar-dark .navbar-nav .nav-link , So let's change it to black as follow : <template> ... </template> <style> .navbar-dark .navbar-nav .nav-link{ color:black!important } </style> Pass your additional class in the toggle-class prop. For example: <b-nav-item-dropdown toggle-class="text-dark" text="Electronics"> See https://bootstrap-vue.js.org/docs/components/nav#dropdown-support for more props this component supports.