I'm looking to customize the background color and font size for an accordion in Bootstrap 4 with Vue.js. Can anyone provide guidance

Hello, I am currently using an accordion with Bootstrap 4 and Vue.js. Here is the code snippet:

<div class="faq_accordion" role="tablist">
    <b-card no-body class="mb-1">
      <b-card-header header-tag="header" class="p-1" role="tab">
        <b-button block v-b-toggle.accordion-1 variant="secondary">How were the beneficiaries selected?</b-button>
      </b-card-header>
      <b-collapse id="accordion-1" accordion="my-accordion" role="tabpanel">
        <b-card-body>
          <b-card-text>I start opened because <code>visible</code> is <code>true</code></b-card-text>
          <b-card-text>{{ text }}</b-card-text>
        </b-card-body>
      </b-collapse>
    </b-card>
</div>

I have added the following to the CSS for styling:

.faq_accordion .card-header {
  background-color: #f1f1f180 !important;
  background: transparent;
}

However, the background color is not showing up as intended. Any suggestions on how to fix this issue? Also, could you please advise on how to adjust the font size of the text in the accordion? Thank you!

csstwitter-bootstrapvue.jsbootstrap-4

Answer №1

At times in the world of Vue, you might find yourself needing to tackle things in a more complex manner, especially when dealing with deep properties. One solution is to adjust your styles in your CSS:

For Vue 2 (which Boostrap Vue relies on):

    ::v-deep .faq_accordion .card-header {
      background-color: #f1f1f180 !important;
      background: transparent;
    }

For Vue 3:

    :deep(.faq_accordion .card-header) {
      background-color: #f1f1f180 !important;
      background: transparent;
    }

Give it a try and see how it goes!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using the ternary operator in various CSS rules

Inside a .hover() function, I've written the code below: $(this).css('background-position', circle.includesXY(e.pageX, e.pageY) ? 'bottom' : ''); I'm wondering how to include additional property:value pairs within ...

jquerycssternary-operator

Tips for disabling default browser input validation in React

https://i.stack.imgur.com/834LB.png Is there a way to remove the message "Please fill out this field" while still keeping the "required" attribute intact? I have my own validation system in place, so I need to use the "required" attribute to determine whe ...

javascripthtmlcssattributes

Is Your Mobile Site Displaying Differently?

Although my resume website looks great on Desktop, I recently noticed that the HTML paragraph tags do not scale correctly when viewed on various mobile web browsers (refer to the images attached below). Screenshot 1: Website displayed in Facebook Messenge ...

androidhtmlcss

Achieving perfect alignment of an image within a Twitter Bootstrap cell when the height of the cell is uncertain

I have a bootstrap grid and I am attempting to center an image (200x100 as shown in the provided example) within a cell. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html& ...

csstwitter-bootstrap

Seeking a solution for resizing the Facebook plugin comments (fb-comments) using Angular when the window is resized

Is it possible to dynamically resize a Facebook plugin comment based on the window or browser size? I want the fb-comment div to automatically adjust its size to match the parent element when the browser window is resized. <div id="socialDiv" class="c ...

javascriptcssangularjsfacebooktwitter-bootstrap-3

Shifting and positioning the card to the center in a React application

I am currently constructing a React page to display prices. To achieve this, I have created a Card element where all the data will be placed and reused. Here is how it appears at the moment: https://i.stack.imgur.com/iOroS.png Please disregard the red b ...

javascripthtmlcssreactjs

Tips for utilizing the onload attribute alongside the ng-controller directive to run a function that has been established within the controller

When trying to call the submit() function as soon as the page loads, I keep encountering a submit() method not found error. The positioning of ng-controller and onload is confusing to me. If there is an alternate method in Angular to achieve this, please ...

javascriptjqueryhtmlcssangularjs

Is there a way to manipulate a button's toggle state using Javascript as the page loads?

I am in the process of developing a straightforward web application that allows users to customize their settings. On the settings page, there are several toggle buttons that need to have their state changed during the page load to align with the preferenc ...

javascripthtmlcssbutton

What is the significance of having both nulls in vue's ref<HTMLButtonElement | null>(null)?

Can you explain the significance of these null values in a vue ref? const submitButton = ref<HTMLButtonElement | null>(null); ...

typescriptvue.js

When using ReactJS, hovering over a row in a table should trigger a change in the background color of the corresponding row in another table with the same index

I need to create a feature where hovering over a row in the first table will highlight a corresponding row in the second table. The highlighting should be based on the index of the hovered row. Here is an example: <div> <table> < ...

javascriptcssreactjsstyled-components

Updating the id token in VueJs using Axios interceptor when it expires

I need to implement an axios interceptor that will add the idToken as an authorization header to every axios call, and also refresh the idToken if it has expired before making any call. My current code for this task is as follows: axios.interceptors.requ ...

javascriptvue.jsaxiosinterceptor

Dynamic Image Grid Created Using JavaScript Glitches

My dilemma involves using JQuery to create an HTML grid of images styled with Flex Boxes. The setup works perfectly on desktop, but when viewing it on mobile devices, the images begin to act strangely - jumping, overlapping, and even repeating themselves i ...

javascriptjqueryhtmlcss

Can you explain the guidelines for overlapping CSS media queries?

When it comes to spacing out media queries accurately to prevent overlap, how should we approach it? Let's examine the following code as an example: @media (max-width: 20em) { /* styles for narrow viewport */ } @media (min-width: 20em) and (max ...

cssresponsive-designmedia-queries

"Fixing the position of a div on the Samsung Galaxy S8 navigation bar to

Here is the HTML code I am working with: <div class="app-bar"> <a href="#'>icon</a> <a href="#'>icon</a> <a href="#'>icon</a> <a href="#'>icon</a> </div>' ...

androidcssios7

Compressing CSS with the help of Gulp

Can anyone assist me with minifying my css in this gulpfile.js for compiling css? I have tried multiple code snippets from the internet but none of them seem to work. Your help would be greatly appreciated. Thank you. var gulp = require('gulp&apo ...

csssassgulpgulp-sassgulp-minify-css

Combining Vue.js with Laravel Blade

I've encountered an issue while trying to implement a Basic Vue script within my Laravel blade template. The error message I am getting reads: app.js:32753 [Vue warn]: Property or method "message" is not defined on the instance but referenc ...

javascriptlaravelvue.jslaravel-blade

Enhancing a v-data-table with Vuetify's editing features

Hey there, I've been trying to customize my v-data-table to better fit my needs in terms of rows and language. I've successfully edited some fields, but I'm struggling to figure out how to change the "of" in "1-50 of 300." I've been go ...

vue.jsvuetify.js

Sorting rows by words and numbers in JavaScript explained

Hello, I'm a beginner and I need help sorting the table rows in the following table. I also want to attach an onclick listener to the header after it is displayed. ID Name Inventory Volume 1 Rachel Data is not enough 2 Ross 100 3 Monica 1 ...

javascripthtmlcsssorting

Creating a hover effect for a div in jQuery or CSS: Keeping the div visible even when hovered

I have two divs in my layout: one is titled "title" and the other is called "description". I successfully made the description div appear when hovering over the title div. You can see an example of this behavior in action on this fiddle Now, I want to cha ...

javascriptjqueryhtmlcssshow-hide

Create a class for the grandparent element

Is there a way to dynamically add a class to a dropdown menu item when a specific child element is clicked? Here's the HTML structure I have: <ul id="FirstLevel"> <li><a href="#">FirstLevel</a></li> <li>< ...

javascriptjqueryhtmlcssdrop-down-menu