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

Personalize the appearance of dynamically generated DIV elements

This script generates a random number of squares (ranging from 20 to 40) and adds text to each square. The script then calculates the width of each square so that they all fit in a single row. Here is the code snippet: var quantity = Math.floor(Math.ran ...

javascriptcss

Error when trying to add style-loader in Vue.js 2 due to webpack installation issue

My task is to set up the style-loader in order to load import 'bootstrap-icons/font/bootstrap-icons.css'. However, when I run npm install style-loader, I encounter the following error message: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to re ...

vue.jsnpmwebpackvuejs2webpack-style-loader

There is an error message in Vue nextTick: "TypeError: this.method is not a function." The error only appears in my console, but the functionality seems to be working correctly in the browser

I'm experiencing an issue where I encounter an error when accessing a certain component for the second time in my browser. The strange thing is that everything appears to be working fine initially, but the error occurs when I try to perform actions li ...

jquerylaravelvue.jsvuejs2vue-router

Arranging Bootstrap 4 columns in a vertical stack

My HTML code is as follows: <html> <head> <title>Title</title> <meta charset="utf-8"> <meta name="description" content="description"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <li ...

htmlcssbootstrap-4

Best method for connecting user input with a class

I'm currently working with a WYSIWYG editor (Tinymce) that allows users to post YouTube videos. In order to make the video content responsive, I need to add the class "video-container" around any "iframe" tags inserted when users paste a YouTube link ...

javascriptjqueryiframetinymcevue.js

What is the best way to apply a CSS class to my anchor tag using JavaScript?

I have a good grasp of using JavaScript to insert an anchor element into my webpage. For instance, var userName_a = document.createElement('a'); However, I am interested in adding a style name to that same element as well. I attempted the follo ...

javascriptcss

`vue-template-compiler package.json module not found in each new project``

After transitioning from Linux to Windows and setting up a programming environment, I encountered an issue that I didn't remember facing on Linux. Here are the steps I took: 1. Installed Node.js 2. Ran npm install -g @vue/cli for CLI installation 3. C ...

node.jsvue.jsnpmvuejs2

Cease the use of setInterval() once the component is no longer visible

I have a Nuxt component that receives logs from an API at regular intervals and displays them. How can I effectively pause the setInterval method when the component is not visible, and resume it when it becomes visible again? <template> <v-con ...

vue.jsnuxt.js

ReactJS Application: Issue with Selective Mobile Scrolling

I've been working on a ReactJS web app where we mainly use styled-components for styling, but also sometimes utilize index.css for global styles (such as body and html). The application consists of an app header, a page header, and a container with a ...

javascriptcssreactjsscroll

Issue regarding the carousel functioning on Bootstrap version 4.5.0

I am currently facing an issue with the carousel in the latest version of Bootstrap (4.5). I have set up a multiple item carousel by creating a grid inside it, where each item looks like this: <div class="carousel-item active"> < ...

htmlcssbootstrap-4carousel

Unexpected display issue with Bootstrap-vue navbar component

I am currently working with bootstrap-vue and trying to implement a navbar component within my application. I followed the first example provided in the documentation at this link. All the necessary dependencies are installed as per the bootstrap-vue instr ...

javascriptvue.jsbootstrap-vuebootstrap-5

Is it beneficial to utilize CSS3 hardware acceleration translate3d for benchmarking purposes? Is it advisable to implement it on the body element

While browsing through content, I stumbled upon a query regarding the impact of transform: translate3d(0,0,0) or transform: translateZ(0) on enabling CSS3 hardware acceleration for animations across different platforms and browsers. It mentioned that combi ...

htmlcsswebkitcss-transformshardware-acceleration

How come my image is not appearing on Vue.js when fetched from the API?

While working on my laravel vue project, I encountered an issue where the image is not being fetched from the backend API. All other data is being displayed correctly except for the image. JSON: [ { "id": 1, "name": ...

laravelvue.js

Why is the CSS selector `:first-child:not(.ignore)` not working to exclude the `ignore` class from the selection?

Is there a way to utilize the first-child selector with the not(.ignore) selector to target every element that is the first child of its parent, except when that first child has the class ignore? I've experimented with :first-child:not(.ignore){...}, ...

htmlcsscss-selectors

I am facing an issue where the display property of inline-block is taking precedence over

I am facing a challenge in placing 2 containers side by side. These containers have a thick white border and are initially hidden until a click event reveals them. The containers are given a class of "hidden". However, in order to align the div containers ...

htmlcss

Incorrect placement of navigation in HTML/CSS dimensions

I'm working on my new portfolio and I've run into an issue with the navigation placement that I can't seem to solve. The text should be aligned with the lines on the sides, but instead it's shifted right and down. I'm struggling t ...

htmlcss

Guide on incorporating the font-awesome library in your project

Forgive me if this sounds like a silly question, but I am completely new to javascript and its libraries. I stumbled upon a similar issue as described in this thread, where the accepted solution included the following line: <link rel="stylesheet" href ...

htmlcssfont-awesome

Designing a custom HTML calendar

I am currently working on a school project where I am creating a calendar using HTML. So far, I have set up the basic structure of the page. What I want to achieve is a functional calendar where users can create appointments that will be displayed accordi ...

javascriptjqueryhtmlcsscalendar

Encountering an issue while trying to create a Vue3 Vite application because of the assignment of a read-only property 'name

I am facing an issue with my Laravel app that utilizes Vite, Vue3, and Inertiajs. Previously, I was able to build it successfully. However, now I encounter the following error: Cannot assign to read only property 'name' of function '(userOp ...

laravelvue.jsviteinertiajs

A two-column bootstrap design with zero padding or gaps

This is the layout I am aiming for: Below is the code I currently have: <div class="row "> <div class="col-lg-6 row-eq-height push-right"> <img src="1.jpg" class="img-responsive"> </div> <d ...

htmlcsstwitter-bootstrap