Ways to update font color using bootstrap-cue

Looking for a button with white text on a dark-blue background

Find the code in xxx.vue 

 <b-dropdown text="user" right variant="blue" class="signout-button">
    <b-dropdown-item @click="toMain()">sign out</b-dropdown-item>
 </b-dropdown>

Here is the style:

.bg-blue {
}
.signout-button {
  border-radius: 10px;
  color: white !important;
  background-color: #183450;
  border-color: #183450;
  border-style: solid;
}

The final result should resemble this:

https://i.sstatic.net/oo553.png

Please note that there may be some text backing issues to address

cssvue.jsbootstrap-4

Answer №1

One way to achieve this is by using the b-dropdown component, which will automatically generate a button tag inside.

.signout-button button{
  color: red;
}

Answer №2

To achieve the desired styling effect on the <b-dropdown> element, you can target it by converting it to a button tag in your CSS.

.signout-button button {
  color: green;
}

You can view a demonstration of this solution on Jsfiddle.

I hope this information proves useful!

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

Is there a way to reverse the animation playback in Angular?

I am working on an animation that involves a box fading from its original color to yellow. However, I would like to achieve the opposite effect: when the page loads, I want the box to start off as yellow and then fade back to its original color. The challe ...

javascriptcssangularanimation

When I try to host my Jekyll site on GitHub Pages using my custom domain, the CSS doesn't seem to be rendering at all

Everything looks perfect when I test my site on local host, but once I push it to my GitHub repo, only the HTML appears with no CSS or JavaScript. I've attempted changing my URL in the config.yml file to https://chanvrequebec.com and modifying href="/ ...

htmlcssgithubjekyllgithub-pages

Can Vue2-Google-Maps dynamically load API keys using props?

Is there a way to access the component props before it gets rendered? I want to dynamically load the Google Maps API based on a passed prop value. import * as VueGoogleMaps from 'vue2-google-maps'; import GmapCluster from 'vue2-google-maps/ ...

javascriptgoogle-mapsvue.jsvue-component

Using Vue CLI to dynamically import modules from project directories

Is it possible to import components from a bundled webpack file using dynamic imports? const url = '${window.location.origin}/assets/default/js/bundle/vue_data.bundle.js'; this.getAxiosInstance().get(url).then(response => { ...

vue.jswebpackimportes6-modulesvue-cli

Tips for managing content size in the Bootstrap column system

I am facing an issue with my bootstrap grid setup. I have a card with an image inside a column, but the card does not occupy the full width of the column. How can I fix this? View current state of my column I've experimented with adjusting the width ...

htmlcssbootstrap-5

jQuery mCustomScrollbars does not correctly resize the height of the div on the initial load

Need help with resizing the height of a div. Currently, I am setting the height of the div using JavaScript, but it only takes effect after refreshing the page (F5). Is there a way to make it work without needing a refresh? Check out the code snippet be ...

phpjquerycsshtml

When the page is zoomed in, the image exceeds the boundaries of the parent div

I attempted to position the div elements but did not achieve the desired outcome. .tab-vertical { border: 1px solid black; } <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" dat ...

htmlcssbootstrap-4cdn

What is the best way to apply custom css to a Google Plus share button within an iframe?

I am having an issue with the CSS on my share button. The Google style is causing my CSS to reset. Here is the iframe code I am using: <iframe src="https://apis.google.com/u/0/_/+1/fastbutton?usegapi=1&amp;size=tall&amp;origin=http%3A%2F%2F ...

cssbuttoniframeshare

How to vertically center a div using CSS

I need assistance center aligning #container with the following code: <div id="container"> <p>new</p> </div> The CSS provided is as follows- #container { position:relative; width:100%; background:red; padding:10px; ...

css

Shorten certain text in Vuetify

Here's an example of a basic select component in Vuetify: <v-select :items="selectablePlaces" :label="$t('placeLabel')" v-model="placeId" required ></v-select> I'm looking to apply a specific style to all selec ...

javascriptcssvue.jsvuetify.js

Tips for resolving the issue of Vue 3 router with multiple calls to next()

Currently, I am tackling the router functionality of my web application. Each time I use "next" to navigate to a specific section, I encounter an issue where it indicates that I have invoked next() multiple times and warns about potential failures in produ ...

vue.jsvuejs3vue-router

Easy Peasy CSS Placement

Struggling with CSS and in desperate need of assistance. I've provided my code attempts along with pictures showing what I currently have versus the desired outcome. HTML <div class="thumbposter"><img src="http://tipmypicks.com/cssmovie ...

htmlcss

Displaying a div when hovering over it, and keeping it visible until clicked

I want to display a div when hovering over a button. The shown div should be clickable and persistent even if I move the cursor from the button into the shown div. However, it should be hidden when moving out of the entire area. I'm unsure about how ...

javascriptjqueryhtmlcss

Optimizing web design with Chrome's developer tools for varying screen resolutions

Recently, I was working on a responsive website and encountered an issue that I can't quite pinpoint. When using the Chrome website developer tool to resize the screen to a smartphone resolution, I noticed some strange behavior at times. It's har ...

htmlcssgoogle-chromewebresponsive-design

Error displaying Font Awesome icons

I am currently facing challenges with managing my assets using webpack. I have installed font-awesome via yarn and imported the .css files into my webpage. However, despite my HTML recognizing the classes from font-awesome.css, the icons I am attempting to ...

csswebpackfont-awesomeyarnpkgsymfony-3.3

Setting up Quasar plugins without using Quasar CLI: A step-by-step guide

I integrated Quasar into my existing Vue CLI project by running vue add quasar. Now I'm attempting to utilize the Loading plugin, but unfortunately, it's not functioning as expected. Here is the configuration setup for Quasar/Vue that I have in ...

javascriptvue.jsloadingquasar-framework

Centering text on input placeholder

What is the best way to center a placeholder vertically in an input field? input[type='text']{ background-color: rgba(255,255,255,.4); border:3px solid rgba(0,0,0,.5); min-height: 45px; border-radius: 6px; color:#fff; } input[type=&apo ...

htmlcss

Clickable links and compliant W3C coding

Recently, I have encountered errors in the W3C validator due to the presence of "name" attributes in some <a> tags in my document. The validator flagged these attributes as obsolete. I am curious to know when and why this happened? Additionally, I n ...

htmlcssw3c

Removing an Element in a List Using Jquery

In my JQuery, there is a list named additionalInfo which gets populated using the function below: $('#append').on('click', function () { //validate the area first before proceeding to add information var text = $('#new-email&a ...

javascriptjqueryhtmlcss

What seems to be causing the malfunction in my child component's functionality?

When passing data to child components using props, sometimes it may seem like the tag isn't working properly. For example, in this case, why isn't 'hello' being printed out? Here is the code snippet: <div id="app"> <child m ...

vue.js